背景
在使用含有 el-table 的抽屉组件时,进行编辑操作的时候勾选表单中已选中的表单项。查看Element 文档 发现了自带的 toggleRowSelection
方法可以实现这个需求。
如下,是初次在项目中使用该方法:
const ListData = [
{
id: 'xxx',
categoryName: 'xxx',
...
},
...
] // 表单 data 绑定数据集合
// 通过请求接口获取表单已勾选的数据
async getListSelectedDataByAPI() {
const res = await getListSelectedData()
nextTick(()=> {
res.data.map(item => {
// 此时并未表单并未复选已勾选项
proxy.$refs.elTableRef.toggleRowSelection(item, true)
})
})
}
上述代码使用 nextTick 方法是因为每次打开抽屉组件都要重新请求表单数据,nextTick 方法是为了在DOM更新循环结束后执行回调操作,此时数据已经渲染到表格中,但是上述方法并没有成功实现复选已勾选项!
解决方案
async getListSelectedDataByAPI() {
const res = await getListSelectedData()
nextTick(()=> {
res.data.map(item => {
// 这里是将表单集合中已勾选项作为 toggleRowSelection 方法的参数传递
proxy.$refs.elTableRef.toggleRowSelection(listData.find(row) => {
return item.id === row.id
}, true)
})
})
}
上述的操作成功实现了表单复选功能,由此可以看出 toggleRowSelection
方法只能将 el-table 的 data 属性绑定的行数据传入才能实现表单多选复选功能,即使是传入和勾选行数据一模一样的数据也是不行的。