el-table的树形表格,父子节点勾选状态无法关联

  • Post author:
  • Post category:其他




el-table的树形表格,父子节点勾选状态无法关联

需求描述:在使用element的el-table的使用,用到了树形表格。发现在勾选父节点的时候,子节点的选中状态不会变化。需求产生:在否选父节点的时候子节点的选中状态也随之改变。

解题思路:

(1)el-table中,有一个row-click方法,参数有一个row。

(1)数据表格从后台接受的每行数据,是有一个children 属性的。children里面存放的就是它的子节点的行数据。

(2)el-table中有一个toggleRowSelection方法,是传入行数据,可以改变该行的选中状态。

分析到这里,各位就知道我要干啥了吧。没错,我是想,从children中取出子节点的行数据,然后去调用toggleRowSelection方法,改变子节点的选中状态。
在这里插入图片描述

代码如下:

@row-click = "handelSelectRow "

handelSelectRow (row, column, event) {

             if (row.children && row.children.length>0){
               this.toggleRowSelection(row.children);
            }
        },
toggleRowSelection(rows){

            if (判断表格是否有数据) {
                for (let i = 0; i <rows.length ; i++) {
                    let row = rows[i];
                    this.$refs.tableref(表格的ref).toggleRowSelection(row);
                }
            }

        }

到这里,就完成了父节点对子节点状态的关联,但是,子节点的操作对父节点还是没有影响的。

欢迎各位看官补充和提问QAQ



版权声明:本文为qq_37377935原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。