element-ui 实现el-table 多选框默认选中

记录时间： 2022-08-12
先上代码实现

<template>
  <div class="test">
    <!--  <el-popover placement="bottom" width="400" trigger="click"> -->
    <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="42" />
      <el-table-column width="150" property="date" label="日期"></el-table-column>
      <el-table-column width="100" property="name" label="姓名"></el-table-column>
      <el-table-column width="300" property="address" label="地址"></el-table-column>
    </el-table>
    <!-- <el-button slot="reference" > 激活</el-button> -->
    <!--  </el-popover> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 3,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 4,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 5,
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 6,
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 7,
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: [],
      ms: {
        id: 7,
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }
    }
  },
  mounted() {
// 巨坑的地方，multipleTable存放的是  this.tableData 数据，必须使用 this.tableData进行遍历才行
    this.tableData.forEach(element => {
      if (element.id == 7) { this.$refs.multipleTable.toggleRowSelection(element, true); }
    });
// 当需要刷新dom的时候使用该方法，比如请求前dom已经加载，如有load状态的情况下，需要使用该形式刷新，否则无效
    this.$nextTick(function () {
      this.machineResultList.forEach(element => {
        if (element.id == 7) { this.$refs.multipleTable.toggleRowSelection(element, true); }
      });
    });
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }

}
</script>

• 从官网抄的实例，最开始本想multipleTable存放id。一直没能实现，最后退而求其次，存放完整数据，结果发现始终无法默认显示，使用新建arrlist，或者直接存放对象，均以失败告终，最后发现必须是 tableData中的数据，推测可能遍历的是tableData，故只有tableData中的数据才能被multipleSelection 认可。
• 刷新选择状态，其中需要注意在有load状态下，dom已经加载完成，需要使用 this.$nextTick 进行重新刷新状态