Table
组件: 修复在多选模式下调用toggleRowSelection
方法后,表格的checkbox
没有被选中的BUG
例如:
export default {
data() {
return {
tableData: [{
id: 1,
name: '王小虎'
}, {
id: 2,
name: '彭小呆'
}]
}
},
methods: {
selectFirstRow1() {
const row = tableData[0]
this.$refs.multipleTable.toggleRowSelection(row, true);
},
selectFirstRow2() {
const row = {
id: 1,
name: '王小虎'
}
this.$refs.multipleTable.toggleRowSelection(row, true);
}
}
}
分别调用selectFirstRow1
方法和selectFirstRow2
方法,会得到完全不同的结果。
selectFirstRow1
方法执行后,页面按照我们想要的结果渲染出勾选状态。
selectFirstRow2
方法执行后,页面的多选表头中的的checkbox状态变成半全选,但是在第一行中的checkbox并没有勾选,出现了和我们预期不一样的结果。
经过排查,我发现在table
组件中的src/store/watcher.js
中的isSelected
方法中的判断为return selection.indexOf(row) > -1;
当对象地址不同时,用这个方法判断会出现此问题。
于是我在 src/util.js
中新增了方法 getRowIndexOfSelection
去获取对象在数组中的位置,然后在 src/util.js
文件中的toggleRowStatus
方法和src/store/watcher.js
文件中的isSelected
方法调用此判断方法,正确获取对象在数组中的位置。具体细节在commit中可以查看。
经过测试没问题了。
执行 yarn dist 正确打包文件如下图: