Element PlusのTransferは、利用可能なリストと移動先のリストを表示し、チェックした項目を移動するためのコントロールを備えています。このモジュール作業画面では、実際の2.14.7 Vueコンポーネントを使用しています。v-modelには移動先のキーが含まれ、初期値はcatalogとtokensです。リスト内のチェックボックスは、次の移動操作の対象を指定するものであり、その項目がすでに移動先に含まれていることを示すものではありません。
Element Plusは、--el-color-primaryとその明暗の派生色、ステータスの役割、テキストカラー、背景変数を公開しています。表には、インストール済みパッケージから取得した実際のコンパイル値を掲載しています。周囲のキーパネルにはprimary-light-9と通常のテキストを使用し、アクションボタンにはネイティブのプライマリー処理を使用しています。
<script setup>
import {ref,computed} from 'vue';
import {ElConfigProvider,ElTransfer,ElCard,ElButton,ElTag,ElAlert} from 'element-plus';
import en from 'element-plus/es/locale/lang/en';
const modules=[{key:'catalog',label:'Asset catalog',disabled:false},{key:'tokens',label:'Token inspector',disabled:false},{key:'review',label:'Review queue',disabled:false},{key:'history',label:'Version history',disabled:false},{key:'audit',label:'Audit export · unavailable',disabled:true},{key:'search',label:'Cross-project search',disabled:false}];
const selected=ref(['catalog','tokens']),applied=ref(null);const names=computed(()=>modules.filter(x=>selected.value.includes(x.key)).map(x=>x.label));
const changed=()=>{applied.value=null};
</script>
<template><ElConfigProvider :locale="en"><main class="module-desk"><header><p class="eyebrow">ELEMENT PLUS / WORKSPACE COMPOSITION</p><h1>Choose the tools this team needs.</h1><p>Move modules between lists, then inspect the exact selected keys.</p></header><ElCard shadow="never"><template #header><div class="card-heading"><h2>Module selection</h2><ElTag type="info">{{selected.length}} selected</ElTag></div></template><ElTransfer v-model="selected" :data="modules" filterable filter-placeholder="Find a module" :titles="['Available modules','Workspace modules']" :button-texts="['Remove','Add']" @change="changed"><template #left-empty><p class="empty">No available module matches.</p></template><template #right-empty><p class="empty">No selected module matches.</p></template></ElTransfer><p class="help">Check a module before using Add or Remove. Audit export stays disabled in this sample.</p></ElCard><div class="summary-grid"><section class="summary"><h2>Workspace modules</h2><ul v-if="names.length"><li v-for="name in names" :key="name">{{name}}</li></ul><p v-else>No modules selected. Add at least one before applying.</p><div class="actions"><ElButton type="primary" :disabled="!selected.length" @click="applied=[...selected]">Apply locally</ElButton><ElButton @click="selected=['catalog','tokens'];changed()">Restore starting set</ElButton></div><ElAlert v-if="applied" title="Selection applied to the local preview" type="success" :closable="false" show-icon description="No installation, entitlement change or external update was performed." /></section><section class="key-panel"><p class="eyebrow">V-MODEL VALUE</p><pre>{{JSON.stringify(selected,null,2)}}</pre><p>The model contains keys, not option objects. Search filters visibility without changing this array.</p></section></div><footer>Native Element Plus Transfer, Card, Tag, Button and Alert. Local module names and availability are original examples.</footer></main></ElConfigProvider></template>
Vue 3 と Element Plus 2.14.7 で動作を確認済みです。App.vue では英語の ConfigProvider とコンポーネントを明示的にインポートします。状態はすべてローカルです。
JavaScript
// Create the project first:
// npm create vite@latest element-plus-specimen -- --template vue
// cd element-plus-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected]
// Save the complete single-file component above as App.vue.
// main.js
import {createApp} from 'vue';
import 'element-plus/dist/index.css';
import './style.css';
import App from './App.vue';
createApp(App).mount('#app');
// index.html: <div id="app"></div>
// style.css: use the complete responsive composition above.
// Vite's standard Vue template includes @vitejs/plugin-vue for .vue files.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
あなたのプロジェクト向けプロンプト
AI エージェント用プロンプト
提供された Element Plus 2.14.7 のワークスペースモジュール選択画面を、ネイティブの ElTransfer を使って拡張してください。キー付きの6つのモジュール、無効な Audit 項目、フィルター動作、選択キーを管理する配列を維持します。適用時には現在のモジュール選択を保存します。その後に編集すると、保存内容が古くなったことが画面上で明確にわかるようにし、復元すると初期の選択状態に戻るようにしてください。Transfer を無関係なリストで作り直すのではなく、2パネルのレスポンシブレイアウトと無効項目の動作を維持します。独自の構成 CSS より前に、ネイティブのスタイルシートを読み込んでください。
05
Element Plus デザインシステムの出典と対象範囲
Element Plus 2.14.7 のネイティブリファレンスを参照しています。モジュール名と権限は独自の例であり、ローカルで選択してもインストールや権限は変更されません。
