el-table怎么在取消多选框勾选时从其他页的已选择的数组中移除对象数组

A：在el-table组件中需要用到v-model来控制多选框的勾选状态，同时设置@select，@select-all两个事件来监听选中和全选操作，可以使用一个数组来保存所有已勾选的对象数组，如下所示：

<template>
  <el-table v-model="tableData" :data="tableData" @select="handleSelect" @select-all="handleSelectAll">
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      selectedRows: [], // 已选择的对象数组
    };
  },
  methods: {
    // 监听选中操作
    handleSelect(selection, row) {
      this.selectedRows.push(row); // 把选中的对象加入已选择的数组
    },
    // 监听全选操作
    handleSelectAll(selection) {
      if (selection.length === 0) {
        this.selectedRows = []; // 如果全部取消勾选，则清空已选择的数组
      }
    },
    // 取消勾选操作
    handleSelectionChange(val) {
      this.selectedRows = val; // 更新已选择的数组
    },
    // 确认操作
    confirmSelection() {
      // 确认操作，处理已选择的数组
      console.log(this.selectedRows);
    },
  },
};
</script>

在取消勾选操作中，可以通过监听selection-change事件来动态更新已选择的数组。如果某个对象在其他页中已经被勾选，那么在当前页取消勾选时也需要把该对象从已选择的数组中移除，代码如下所示：

// 取消勾选操作
handleSelectionChange(val) {
  // 在其他页中已选择的对象数组
  const selectedRowsInOtherPages = this.tableData.filter((row) =>
    this.selectedRows.includes(row)
  );
  // 在当前页中已选择的对象数组
  const selectedRowsInCurrentPage = val.filter((row) =>
    !selectedRowsInOtherPages.includes(row)
  );
  // 更新已选择的数组
  this.selectedRows = selectedRowsInOtherPages.concat(selectedRowsInCurrentPage);
},