el-transfer怎么配合el-table使用

### 结合 el-transfer 和 el-table 的使用 为了更好地展示和操作数据，可以将 `el-transfer` 组件与 `el-table` 组件结合起来使用。这不仅能够提供更好的用户体验，还能增强数据管理的功能。 #### 数据准备 首先定义好用于传输的数据源以及表格显示所需字段： ```javascript export default { data() { const generateData = () => { let data = []; for (let i = 1; i <= 15; i++) { data.push({ key: i, label: `备选项 ${i}`, disabled: i % 4 === 0, description: `这是描述${i}` }); } return data; }; return { tableColumns: [ { prop: 'label', label: '名称' }, { prop: 'description', label: '描述'} ], transferData: generateData(), selectedKeys: [1, 4], rightTableData: [] }; } } ``` 上述代码创建了一个包含标签名和描述属性的对象数组作为初始数据集，并设置了两个默认选中的项[^1]。 #### 页面布局设计 通过模板语法构建页面结构，在左侧放置可选择列表，在右侧则是一个表格来呈现已选择的内容： ```html <template> <div style="display:flex;"> <!-- 左侧转移组件 --> <el-transfer v-model="selectedKeys" :props="{key:'key',label:'label'}" :data="transferData" @change="handleTransferChange"> </el-transfer> <!-- 右侧表格组件 --> <el-table class="ml-20px" border stripe :data="rightTableData"> <el-table-column v-for="(column,index) in tableColumns" :prop="column.prop" :label="column.label" :key="index"/> </el-table> </div> </template> ``` 这里利用了 `v-model` 来绑定双向数据流，当用户改变左边的选择时会触发相应的事件处理函数更新右边表格内的数据显示。 #### 动态同步逻辑 每当发生变更时都需要重新计算并设置新的右表数据集合： ```javascript methods:{ handleTransferChange(newTargetKeys){ this.rightTableData = newTargetKeys.map(key=>{ return this.transferData.find(item=>item.key===parseInt(key)) }) } } ``` 这段 JavaScript 方法会在每次调用时接收最新的目标键值列表参数 `newTargetKeys` ，遍历这些键找到对应完整的对象信息加入到最终渲染给 `<el-table>` 显示的结果集中去。 这样就完成了一个简单的例子展示了如何把 Element UI 中的 Transfer 控件同 Table 表格控件联合起来工作的方式[^2]。