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

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

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
如果你使用的是 ElementUI 中的 el-table 树形表格,那么你可以通过设置 `treeProps` 属性来指定树形结构的相关属性。其中包括 `children` 表示子节点的属性名,`hasChildren` 表示是否有子节点的属性名。 在排序时,你可以使用 `sort` 属性来指定排序规则,例如: ```html <el-table :data="tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :sort-method="sortTable"> <el-table-column prop="name" label="名称" sortable></el-table-column> <el-table-column prop="age" label="年龄" sortable></el-table-column> </el-table> ``` 其中,`sort-method` 属性指定了排序方法,可以在 `methods` 中定义: ```js methods: { sortTable(a, b) { // 判断是否为根节点 const aParent = this.getParentNode(a) const bParent = this.getParentNode(b) const aIsRoot = !aParent const bIsRoot = !bParent // 根节点优先 if (aIsRoot && !bIsRoot) { return -1 } else if (!aIsRoot && bIsRoot) { return 1 } // 比较节点值 if (a[this.sortField] > b[this.sortField]) { return this.sortOrder === 'ascending' ? 1 : -1 } else if (a[this.sortField] < b[this.sortField]) { return this.sortOrder === 'ascending' ? -1 : 1 } else { return 0 } }, getParentNode(node) { // 获取当前节点的父节点 const parentKey = this.$refs.table.treeProps.children const parentNode = this.$refs.table.getNodeById(node[parentKey]) return parentNode } } ``` 在 `sortTable` 方法中,首先判断当前节点是否为根节点,如果是根节点则优先排在前面。然后再比较节点值进行排序。在获取父节点时,可以使用 `$refs` 获取到 el-table 的实例,然后调用 `getNodeById` 方法获取节点对应的行数据。 以上是一个示例代码,你可以根据自己的实际需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值