el-table中type=“selection“选中数据如何回显
效果如下
代码如下
关键函数:toggleRowSelection(this.tableData[i])设置默认选中数据。
<template><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="日期"width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],res:[{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],multipleSelection: []}},mounted(){this.init()},methods: {init() {//res数组正常是后台调用接口查询到的数据,为了更直观的展示,用假数据代替。this.$nextTick(() => {this.res.forEach(el=>{for(let i=0;i<this.tableData.length;i++){if(el.date==this.tableData[i].date){this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);}} })}) },handleSelectionChange(val) {this.multipleSelection = val;}}}
</script>