element表格界面获取新数据,自动将原勾选数据继续勾选并可以取消勾选完整版代码

在Element UI的表格组件中，当你获取新的数据并且希望保持之前的勾选状态时，你可以利用`table`组件的`row-key`属性以及`@selection-change`事件处理程序。以下是完整的Vue.js示例代码：

<template>
  <el-table :data="tableData" :row-key="getRowKey" ref="table">
    <!-- 表格列 -->
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 其他列... -->

    <!-- 勾选状态更新函数 -->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-checkbox v-model="scope.$index === selectedRows.indexOf(scope.row)" @change="toggleCheckbox(scope.row)"></el-checkbox>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 原始数据数组
      selectedRows: [], // 保存已选择行的索引
      // 获取新数据后是否需要保留勾选状态的标志
      preserveSelection: true,
    };
  },
  methods: {
    toggleCheckbox(row) {
      if (this.preserveSelection && this.selectedRows.includes(row.id)) {
        // 如果需要保持勾选，且当前行在selectedRows中，则不改变勾选状态
      } else {
        // 更新勾选状态，如果不需要保留勾选或行不在列表中，取消勾选
        this.selectedRows = [...this.selectedRows.filter(index => index !== row.id)];
      }
    },
    getRowKey(row) { // 定义每行唯一的key
      return row.id; // 假设id字段作为唯一标识
    },
    fetchData(newData) {
      // 获取新数据后
      this.tableData = newData;
      // 是否保留勾选状态，默认为true
      this.preserveSelection = true; // 可根据实际情况设置

      // 如果需要保持勾选，遍历新数据，判断是否存在于旧数据的勾选状态中，然后设置勾选
      newData.forEach((item, index) => {
        const oldIndex = this.tableData.findIndex(data => this.getRowKey(data) === item.id);
        if (oldIndex !== -1 && this.selectedRows.includes(oldIndex)) {
          this.toggleCheckbox(item); // 设置新来的项的勾选状态
        }
      });
    },
  },
};
</script>