element中两个table表格和已选数据联动

在Element UI中，要实现两个<el-table>组件的数据联动，可以通过使用v-model或者:data属性来实现。以下是一个简单的例子，展示了如何实现两个表格之间数据的联动。

<template>
  <div>
    <el-table
      :data="tableData1"
      @selection-change="handleSelectionChange1"
    >
      <!-- 表格列定义 -->
    </el-table>
 
    <el-table
      :data="tableData2"
      @selection-change="handleSelectionChange2"
    >
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData1: [
        // 数据项
      ],
      tableData2: [
        // 数据项
      ],
      selectedRows1: [],
      selectedRows2: []
    };
  },
  methods: {
    handleSelectionChange1(val) {
      this.selectedRows1 = val;
      // 联动更新tableData2
      this.tableData2 = this.selectedRows1.map(row => ({...row}));
    },
    handleSelectionChange2(val) {
      this.selectedRows2 = val;
      // 联动更新tableData1
      this.tableData1 = this.selectedRows2.map(row => ({...row}));
    }
  }
};
</script>

在这个例子中，两个表格分别绑定了tableData1和tableData2作为它们的数据源。当其中一个表格的选择发生变化时，通过@selection-change事件处理函数handleSelectionChange1和handleSelectionChange2来更新相应的数据集，并且这种变化会实时地反映到另一个表格的数据源上。这样就实现了两个表格之间数据的联动。