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

56 阅读1分钟

背景

在使用含有 el-table 的抽屉组件时,进行编辑操作的时候勾选表单中已选中的表单项。查看Element 文档 发现了自带的 toggleRowSelection 方法可以实现这个需求。

image.png

如下,是初次在项目中使用该方法:

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