首页el-transfer插入el-table

el-transfer插入el-table

时间: 2025-03-04 08:52:48 浏览: 42

### 将 el-transfer 数据绑定至 el-table 为了实现`el-transfer`组件的数据能够被成功传递并显示在`el-table`中，可以创建一个Vue实例，在其中定义两个属性用于存储来自`el-transfer`的选择项以及表格所需展示的内容。当用户通过`el-transfer`选择了特定项目之后，这些项目的键值会被保存在一个数组里；随后可以通过监听这个模型的变化来更新另一个用来渲染表格的列表。 #### HTML模板部分 ```html <template> <div>  <el-transfer v-model="selectedItems" :data="allOptions"></el-transfer>  <el-table :data="tableData"> <el-table-column prop="key" label="编号"></el-table-column> <el-table-column prop="label" label="名称"></el-table-column> </el-table> </div> </template> ``` #### JavaScript逻辑处理 ```javascript <script> export default { data() { const generateData = () => { let data = []; for (let i = 1; i <= 15; i++) { data.push({ key: i, label: `备选项 ${i}`, disabled: i % 4 === 0 }); } return data; }; return { allOptions: generateData(), selectedItems: [], tableData: [] }; }, watch: { // 当selectedItems发生变化时触发此函数 selectedItems(newValue) { this.updateTableData(newValue); } }, methods: { updateTableData(keys) { this.tableData = keys.map(key => this.allOptions.find(option => option.key === key) ); } } }; </script> ``` 上述代码实现了从`el-transfer`向`el-table`传输数据的功能[^2]。每当`v-model`所关联的对象发生改变——即有新的条目被加入或移除自转移区域之时，便会自动调用`updateTableData()`方法刷新表格视图，从而确保两者之间的一致性和同步性。

阅读全文