el-table多例复选

为了实现el-table的多例复选，需要在el-table中添加selection-change事件和selection属性。其中，selection属性是一个数组，用于存储选中的行数据。在selection-change事件中，我们可以通过$refs获取到当前的el-table实例，并通过该实例的getSelections()方法获取到当前选中的行数据。下面是一个el-table多例复选的示例代码：

<template>
  <div>
    <el-table
      :data="tableData1"
      :row-key="getRowKeys"
      ref="tableData1"
      @selection-change="handleSelectionChange('tableData1')"
      v-if="tableData1.length"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

    <el-table
      :data="tableData2"
      :row-key="getRowKeys"
      ref="tableData2"
      @selection-change="handleSelectionChange('tableData2')"
      v-if="tableData2.length"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' },
      ],
      tableData2: [
        { name: '赵六', age: 24, address: '深圳市' },
        { name: '钱七', age: 26, address: '杭州市' },
        { name: '孙八', age: 28, address: '南京市' },
      ],
      selection1: [], // 存储tableData1选中的行数据
      selection2: [], // 存储tableData2选中的行数据
    };
  },
  methods: {
    getRowKeys(row) {
      return row.name;
    },
    handleSelectionChange(tableRef) {
      const table = this.$refs[tableRef];
      const selections = table.getSelections();
      this[tableRef === 'tableData1' ? 'selection1' : 'selection2'] = selections;
    },
  },
};
</script>