Element-ui el-table 组件表单多选框 toggleRowSelection 方法失效

背景

在使用含有 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 属性绑定的行数据传入才能实现表单多选复选功能，即使是传入和勾选行数据一模一样的数据也是不行的。