(el-Transfer)操作(不使用 ts)：Element-plus 中 Transfer 穿梭框右侧数据不展示的问题

在使用 `Element Plus` 的组件 `el-transfer` 实现右侧数据回显功能时，需要关注以下几个关键点： ### 1. **初始选中值设置** - 确保通过 `v-model` 绑定的数据（通常是数组形式）能够准确反映当前已选择的选项。这组数据应包含右侧列表显示的所有键值。 - 如果服务器返回的是 ID 数组或其他标识符，则需要将其与左侧原始数据匹配。 ### 2. **key 和 label 属性绑定** - 使用 `props` 对象明确指定每一项对应的关键字段名（如 `key` 和 `label`），以便正确渲染并区分每个传输项。 ```javascript props: { key: 'id', // 数据唯一标识属性名称，默认为 "key" label: 'name' // 显示文本对应的属性名称，默认为 "label" } ``` ### 3. **过滤条件同步** - 当对源侧数据应用了筛选操作后，保证右侧展示的内容不会受到影响；因此建议将左右两部分分开维护状态管理逻辑，并保持一致性的呈现效果。 ### 4. **动态更新处理** - 在某些场景下可能涉及到异步加载更多内容或者实时修改配置信息等情况，在这种时候要及时刷新视图结构同时保留原有用户交互成果不变形。 --- #### 示例代码片段： ```vue <template> <div> <!-- 双向绑定 value --> <el-transfer v-model="selectedItems" :data="sourceData" :props="{ key: 'id', label: 'name' }"></el-transfer> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const sourceData = [ { id: 1, name: 'Option A' }, { id: 2, name: 'Option B' }, ]; // 模拟从服务端获取到的选择结果 [ids] let preSelectedIds = [1]; // 需要手动映射成完整的对象引用作为 v-model 初始值 const selectedItems = ref(preSelectedIds.map(id => id)); </script> ``` --- **注意事项总结：** - 始终确认双向绑定模型是否涵盖了所有必要的选定条目； - 定义清晰地传递至 prop 中关于每一条记录的具体标志和标签说明； - 动态变化过程中注意维持界面稳定性和一致性体验。