Use Element Plus’s real Transfer model, filters and disabled options to build a module-selection workbench, backed by verified colors, type sizes and control dimensions.
Element Plus 2.14.7 default compiled CSS. Variables are verified package values, including semantic aliases. The transfer layout uses original responsive composition rules, separated from the system foundation.
Element Plus Design System A Transfer List Has Two Kinds of Selection
A Transfer List Has Two Kinds of Selection
Element Plus Transfer presents available and target lists with controls for moving checked items. The module workbench uses the actual 2.14.7 Vue component. Its v-model contains the target keys, initially catalog and tokens. A checkbox inside a list marks an item for the next transfer action; it does not itself mean the item already belongs to the target.
That distinction is made visible by the live model readout. Checking a source item prepares it for Add. Pressing Add changes the target key array, updates the selected-module summary, and clears any previous applied result. A reader can therefore see the library’s model contract rather than guessing it from a pair of static lists.
Element Plus Design System Default Roles and Concrete Component Dimensions
Default Roles and Concrete Component Dimensions
Element Plus exposes --el-color-primary and its light/dark derivatives, status roles, text colors and surface variables. The table reports actual compiled values from the installed package. The surrounding key panel uses primary-light-9 and ordinary text, while the action button uses the native primary treatment.
The default typography includes a fourteen-pixel base with twelve, thirteen, sixteen, eighteen and twenty-pixel companion sizes. Component-size variables describe small/default/large control dimensions. These should not be mistaken for a page layout spacing scale. The workbench’s twenty-four-pixel gaps and thirty-two-pixel outer padding are explicit original composition choices.
Element Plus Design System Stable Keys, Labels, and Disabled Options
Stable Keys, Labels, and Disabled Options
Each option has a key, label and disabled flag. The selected array is made of those keys, allowing labels to change without changing identity. The sample modules include Asset catalog, Token inspector, Review queue, Version history and Cross-project search. Audit export stays disabled to demonstrate a visible but unavailable choice.
Availability in this example is static demonstration data. It is not an entitlement check or a promise that these modules exist as installable products. In an actual application, the option source and permission rules must come from the product’s model. Do not infer authorization from the fact that a Transfer checkbox can be clicked.
Element Plus Design System Search Changes Visibility, Not Membership
Search Changes Visibility, Not Membership
filterable adds independent searches to the panels. The filter placeholder gives a concrete action, Find a module. Default filtering matches the option label. A selected item can disappear from the visible target list under a search without being removed from the selected key array; the summary and readout continue to reveal the complete target set.
Custom left-empty and right-empty slots distinguish a panel with no matching choices from the global case where nothing is selected. The page also disables Apply locally when the target array is empty. These are separate states: no search matches does not mean no selected modules.
Search for Review queue in the available panel.
Check the matching option and press Add.
Clear the search and verify that review appears in the model readout and target list.
Element Plus Design System Keep the Two-List Relationship on Mobile
Keep the Two-List Relationship on Mobile
The native Transfer panels are arranged side by side on desktop, with a dedicated area for Add and Remove. On screens no wider than seven hundred pixels, the panels stack and the action buttons form a horizontal row between them. The titles continue to identify Available modules and Workspace modules so the direction of a move remains clear.
The workbench does not scale the entire control down to fit the phone. It adapts the composition while keeping labels, checkboxes, searches and list content at native readable sizes. The selected-key readout and textual summary move into a single column below, preserving the same information rather than hiding it at a smaller breakpoint.
Element Plus Design System Draft Membership and Applied Snapshot
Draft Membership and Applied Snapshot
Apply locally copies the selected key array. A subsequent transfer change clears that applied state, so a success alert does not persist after the user changes the draft membership. Restore starting set assigns a fresh catalog/tokens array and also clears the applied result. The state transitions are a few explicit lines in the Vue source.
The alert says only that the local preview selection was applied. It does not claim installation, entitlement changes or an external update. For a real settings screen, the applied snapshot would need to correspond to a confirmed persistence result; a component event alone is not a server acknowledgment.
Element Plus Design System Native Controls and Understandable Instructions
Native Controls and Understandable Instructions
The example keeps the native Transfer checkboxes and transfer buttons. Button text is set to Remove and Add rather than leaving only directional icons, which becomes particularly useful when the lists stack vertically. Panel titles explain the source/target roles and the help sentence explains the check-then-move sequence.
The disabled option remains in context, and the empty panel slots communicate the absence of matching options. Keyboard users should be able to reach search fields, checkboxes and buttons without custom pointer-only handlers. The component manages its own internal behavior; the application avoids replacing that structure with painted rows that merely resemble selection controls.
Panel titles establish which list is the target.
Text labels keep transfer direction clear in the stacked layout.
The live model readout makes hidden selected items discoverable.
Element Plus Design System Compile the Vue Component and Load the CSS
Compile the Vue Component and Load the CSS
In a Vue 3 Vite project, install [email protected] and import element-plus/dist/index.css before the original layout CSS. The complete App.vue uses script setup and imports its components directly. ElConfigProvider receives the English locale so built-in panel and empty-state text stays consistent with the English reference page.
The provided production-style setup imports App.vue through the Vue Vite plugin. The offline specimen was built by compiling the same single-file component and bundling it locally. It does not need an external CDN, an auto-import service or a runtime template compiler. If an existing project uses an auto-import plugin, keep its generated styles consistent with the chosen full or per-component import strategy.
Element Plus Design System Theme Overrides Must Preserve Component Relationships
Theme Overrides Must Preserve Component Relationships
CSS custom properties are useful for changing shared roles without rewriting every component selector. The workbench consumes the actual --el variables for background, text, borders and corners. It changes only layout selectors needed to fit the native Transfer into this particular composition.
For a broader brand theme, use the documented Sass or CSS-variable approach and examine hover, disabled and focus states together. Replacing only the primary hex value in one screenshot misses its lighter surfaces and darker interactions. The source-backed table provides the starting values; the full native preview lets a reader inspect the consequences in a working component.
A single-file component using native Transfer, Card, Alert, Button and Tag.
vue
<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>
The breakpoint and surrounding layout are original choices.
04
Element Plus Design System Agent Setup
Implementation Starting Point
Verified with Vue 3 and Element Plus 2.14.7. App.vue supplies the English ConfigProvider and explicit component imports. All state is local.
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
A Prompt for Your Project
Agent Prompt
Extend the supplied Element Plus 2.14.7 workspace module selector using native ElTransfer. Keep the six keyed modules, disabled Audit entry, filter behavior and controlled selected-key array. Applying must capture the current module selection; later edits should make that snapshot visibly stale, while restore returns the initial selection. Preserve the responsive two-panel layout and disabled-item semantics rather than rebuilding Transfer as unrelated lists. Load the native stylesheet before the original composition CSS.
05
Element Plus Design System Sources and Scope
Element Plus 2.14.7 native reference. Module names and permissions are original examples; local selection performs no installation or entitlement change.
