记录时间： 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 进行重新刷新状态
