美文网首页
ElementUI 表格使用 toggleRowSelectio

ElementUI 表格使用 toggleRowSelectio

作者: Cherry丶小丸子 | 来源:发表于2021-07-14 23:50 被阅读0次

原因:设置选中的行数据表格中的行数据不是同一个数据(虽然数据一摸一样,但是内存指针不一样),所以导致直接使用选中的行数据来设置可能会不生效

解决方案:通过循环选中的行数据(multipleSelection),然后从表格所有数据(tableData)中匹配 id 找到需要选中的项来帮助选中

toggleSelection() {
    this.$nextTick(() => {
        this.multipleSelection.map(row => {
            this.$refs.table.toggleRowSelection(this.tableData.find(item => row.id == item.id), true); // 注意这里寻找的字段要唯一
        });
    })
})

通过 find() 方法,让表格(this.tableData)去匹配选中的行数据(this.multipleSelection)的数据,然后使用toggleRowSelection方法设置选中

总结:toggleRowSelection操作的数据和指针有关,我们只能操作当前表格的数据,虽然 toggleRowSelection 传入的 选中的行数据表格中的行数据的某一项的数据一模一样,但是它们的指针不同,指向不同内存地址

如果选中的行数据总数 大于 当前表格分页中的数据数量(比如第一页显示10条),可能会报错row is required when get row identity
原因:find 方法匹配不到数据会返回undefined,导致报错

解决方案:换一种循环查找方式
toggleSelection() {
    this.$nextTick(() => {
        for(let i = 0; i < this.multipleSelection.length; i++){
            for(let j = 0; j < this.tableData.length; j++){
                if(this.multipleSelection[i].id == this.tableData[j].id){
                    this.$refs.table.toggleRowSelection(this.tableData[j], true);
                }
            }
        }
    })
})

相关文章

网友评论

      本文标题:ElementUI 表格使用 toggleRowSelectio

      本文链接:https://www.haomeiwen.com/subject/hwpepltx.html