elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变

在Element UI中使用type="selection"时，如果需要回显已选择的数据，你需要将表格数据的selection字段与要回显的数据数组进行对应。

以下是一个简单的例子，展示如何在Element UI的表格中实现多选框的回显：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    ref="multipleTable"
    :row-key="getRowKey"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      selected: [],  // 已选择的数据数组
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selected = val;
    },
    getRowKey(row) {
      return row.id; // 假设每行数据都有唯一的id字段
    },
    // 回显数据的方法
    setSelectedRows() {
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection();
        for (let row of this.tableData) {
          if (this.selected.find(item => item.id === row.id)) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        }
      });
    }
  },
  mounted() {
    // 假设这是从服务器获取的数据
    this.tableData = [
      // ...数据对象数组
    ];
    // 假设这是需要回显的已选择数据
    this.selected = [
      // ...已选择的数据对象数组
    ];
    // 调用方法回显已选择的行
    this.setSelectedRows();
  }
};
</script>

在这个例子中，tableData是表格的数据源，selected是已经选择的数据数组。getRowKey方法用于为表格的每一行指定一个唯一的key，这是必要的，因为Element UI的多选框操作依赖于这个key来维护内部的选中状态。setSelectedRows方法在mounted钩子中被调用，它在Vue的下一个更新周期中执行，确保表格已经渲染完成，然后遍历tableData，如果行的数据对象在selected数组中存在，则使用toggleRowSelection方法选中这一行。