<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>
遗憾哥
2024-11-06 17:40:09
666