小知识,大挑战!本文正在参与“ 程序员必备小知识 ”创作活动
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
问题:
Element-ui中,表格(Table)的 toggleRowSelection 方法无法默认选中的情况。 需求:对将设置为选中的内容进行部分修改,如:默认选中的内容必须得通过接口或者其他方式来获取,然后再默认选中。
官方代码:
<template>
<div class="wrap">
<el-table
border
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<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([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<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: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>
<style lang="stylus" scoped>
.wrap{
padding: 10px;
}
</style>
复制代码
上面的代码就是官方代码,使用效果如下:
从图中看,确实可进行默认选中;
默认选中的内容得通过接口或者其他方式获取,然后再默认选中。示例代码如下:
<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>
复制代码
理论上,上面的内容应该能让表格中的最一列进行选中,然而现实是不行的。
扫描二维码关注公众号,回复:
13165637 查看本文章
![](/qrcode.jpg)
从上面可以看出,首部有选择效果,但却未选中相对应的内容。
解决方法:
从列表(tableData)中找到需要选中的对象,把它筛选出来作为选中的项。注意:寻找的字段要唯一;
因此,我们将上面的方法改为如下的写法就可以了。
methods: {
toggleSelection() {
this.multipleSelection.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(
this.tableData.find(item => { return row.date == item.date;}
),true);
});
}
}
复制代码
补充:另一种无法选中的情况
原因:在于 vue 组件和表格的渲染顺序问题,代码执行的时候页面渲染还未完成。(如:表格放在 dialog 之类的弹出框里面);
解决方式:在外层加个 nextTick() 与 Vue.nextTick() 原理及使用 ](blog.csdn.net/ZYS10000/ar…)
toggleSelection() {
this.$nextTick(() => {
this.multipleSelection.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(
this.tableData.find(item => {return row.date == item.date; }
),true);
});
})
}
复制代码
分析:
现在对官方示例分析:
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
console.log(row); // 这里仅仅加了个打印操作
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
}
复制代码
效果如下,此时可以选中。
然后对代码进行细微修改
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
// 区别:将内容放在obj对象里面,用于提取需要的字段
const obj = {
date: row.date,
name: row.name,
address: row.address
}
console.log(obj)
this.$refs.multipleTable.toggleRowSelection(obj);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
复制代码
这是为什么呢?明明传入的同样是一个对象啊,而且字段名称与数量都是一样的,然而结果却不同? 对比两个打印的内容发现问题:两个打印的字段是有一点点细微的区别的。 然而我个人实力有限,无法找到区别的原理是什么,欢迎留言讨论。 有可能是官方的一个Bug,也可能是官方设计如此,可以去官方git上逛逛:github.com/ElemeFE/ele…