el-transfer配合el-table

### 将 `el-transfer` 和 `el-table` 组件结合使用

为了将 `el-transfer` 和 `el-table` 这两个组件结合起来，可以创建一种界面设计，在其中用户可以从一个表格中选择项并将其转移到另一个表格。这种组合不仅增强了用户体验，还使得数据管理更加直观。

#### HTML 部分
定义了一个模板结构来展示两个 `el-table` 表格以及用于转移项目的按钮。通过 `v-model` 双向绑定选中的键值到父级的数据属性上[^1]。

<template>
  <div class="transfer-container">
    <!-- 左侧表单 -->
    <el-table :data="leftTableData" @selection-change="handleLeftSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="label" label="名称"></el-table-column>
    </el-table>

    <!-- 中间操作区 -->
    <div class="operation-area">
      <el-button @click="add">＞</el-button><br/>
      <el-button @click="remove">＜</el-button>
    </div>

    <!-- 右侧表单 -->
    <el-table :data="rightTableData" @selection-change="handleRightSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="label" label="名称"></el-table-column>
    </el-table>
  </div>
</template>

#### JavaScript 部分
在脚本部分初始化了左右两侧表格所需的数据源，并实现了添加和移除项目的方法逻辑。这里利用 Vue 的响应式特性自动更新视图状态[^2]。

<script>
export default {
  data() {
    const generateData = () => {
      let data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: false // 假设所有条目都是可用的
        });
      }
      return data;
    };

    return {
      allOptions: generateData(),
      selectedKeys: [], // 存储已选中的key列表
      leftTableData: [],
      rightTableData: []
    };
  },
  
  methods: {
    handleLeftSelectionChange(selection) {
      this.selectedKeys = selection.map(item => item.key);
    },

    handleRightSelectionChange(selection) {
      this.selectedKeys = selection.map(item => item.key);
    },

    add() {
      this.rightTableData = [
        ...this.rightTableData,
        ...this.leftTableData.filter(item =>
          this.selectedKeys.includes(item.key)
        )
      ];
      
      this.leftTableData = this.leftTableData.filter(
        item => !this.selectedKeys.includes(item.key)
      );
    },

    remove() {
      this.leftTableData = [
        ...this.leftTableData,
        ...this.rightTableData.filter(item =>
          this.selectedKeys.includes(item.key)
        )
      ];

      this.rightTableData = this.rightTableData.filter(
        item => !this.selectedKeys.includes(item.key)
      );
    }
  },

  created() {
    this.leftTableData = [...this.allOptions];
  }
};
</script>

此方案提供了一种灵活的方式来管理和显示复杂的数据集，允许用户轻松地在不同集合之间移动记录。同时保持了良好的可维护性和扩展性，便于后续的功能增强和技术升级。