<template> <div class="wrap"> <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection">切换</el-button> </div> </div> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], // 假如是通过接口或者其他形势获得的某个选中行内容,注意这里多了几个字段 multipleSelection: [ { date: "2016-05-07", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", description: '这里是描述', type: '类型', id: 'aaaaa111111' } ] } }, methods: { toggleSelection() { // 提取出table表行字段对应的字段 this.multipleSelection.forEach(row => { const obj = { date: row.date, name: row.name, address: row.address }; this.$refs.multipleTable.toggleRowSelection(obj,true); }); }, } } </script> <style lang="stylus" scoped> .wrap{ padding: 10px; } </style>
从列表(tableData)中找到需要选中的对象,把它筛选出来作为选中的项。注意:寻找的字段要唯一;
因此,我们将上面的方法改为如下的写法就可以了。
methods: {
toggleSelection() {
this.multipleSelection.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(
this.tableData.find(item => { return row.date == item.date;}
),true);
});
}
}