element ui toggleRowSelection 回显无效
现象
组件初始加载时, 通过外部接口拉取需要设置的表格项数据.
通过表格实例方法toggleRowSelection
设置已选项无效.
element table 实现
- 表格的checkbox如何获取选中值
// element/blob/dev/packages/table/src/table-body.js
<TableRow
...
// 通过 this.store.isSelected 方法判断
style={[displayStyle, this.isSelected={this.store.isSelected(row)}>
</TableRow>
- store 实现
// element/blob/dev/packages/table/src/store/watcher.js
isSelected(row) {
const { selection = [] } = this.states;
// 判断当前值是否存在
return selection.indexOf(row) > -1;
},
这里的判断是对表格数据做的对象比较, 所以存在调用 toggleRowSelection 方法是出入的数据属性值相同,但依然无法设置成功, 此时必须从表格数据中查出对应的row值, 作为设置值.
解决方法
const tableEle = ref()
const tableData = ref([])
function setTableChecked (rows, status = true) {
const ele = tableEle.value
if (!ele) {
return false
}
// 重置已选状态
ele.clearSelection()
// 筛选需要选中的数据
const bingo = tableData.value.filter(i => rows.some(row => row.id === i.id))
// 重置组件内已选项列表, 保证isSelected内正常触发
ele.store.selection = bingo
// 触发更新
nextTick(() => {
// 更新选中
bingo.map(row => {
ele.toggleRowSelection(row, status)
})
})
return true
}
网友评论