Element-ui 实现el-table 多选框默认选中(巨坑!!!)

2024-10-27 15:06:03 | 前端Number of visitors 317
<template>
  <div class="test">
    <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>
  </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(row => {
      if (row.id == 7) { this.$refs.multipleTable.toggleRowSelection(row, true); }
    });
    // 当需要刷新dom的时候使用该方法,比如请求前dom已经加载,如有load状态的情况下(el-dialog中多选表格应用场景常见),需要使用该形式刷新,否则无效
    this.$nextTick(function () {
      this.tableData.forEach(row=> {
        if (row.id == 7) { this.$refs.multipleTable.toggleRowSelection(row, true); }
      });
    });
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }

}
</script>



send发送