el-tree树形结构实现自定义关联

最新推荐文章于 2024-07-23 15:23:00 发布

#GZ

最新推荐文章于 2024-07-23 15:23:00 发布

阅读量445

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/JINGZzhuo/article/details/128376168

版权

树控件联选问题，要求为点击父节点自动联选所有子节点，而只要选中一个以上的子节点，父节点就选中，取消所有子节点，父节点依然选中。

要求效果如下：

视频

el-tree结构如下：

                    <el-tree ref="tree"
                         :data="data"
                         show-checkbox
                         node-key="name"
                         :check-strictly="true"
                         :props="defaultProps"
                         @check="buttones"
                         @check-change="handleCheckChange" />

el-tree中 check-strictly 属性能让父子节点关联

buttones方法如下：

    buttones(currentObj, treeStatus, a, b) {
     
      //   console.log(this.rolesave.permissions, '所有的')

      let selected = treeStatus.checkedKeys.indexOf(currentObj.name) // -1未选中
      // 选中
      if (selected !== -1) {
        // 子节点只要被选中父节点就被选中
        this.selectedParent(currentObj)
        // 让子节点全部未选中
        this.uniteChildSame(currentObj, true)
      } else {
        // 未选中 让子节点全部未选中
        if (currentObj.childrens.length !== 0) {
          this.uniteChildSame(currentObj, false)
        }
      }
    },

    // 统一处理子节点为相同的勾选状态
    uniteChildSame(currentObj, isSelected) {
      if (currentObj.childrens == null || currentObj.childrens.length == 0) {
        return
      }
      for (var item of currentObj.childrens) {
        this.$refs.tree.setChecked(item.name, isSelected)
        this.uniteChildSame(item, isSelected)
      }
    },

    // 统一处理父节点为选中
    selectedParent(currentObj) {
      let currentNode = this.$refs.tree.getNode(currentObj)
      if (currentNode.parent.key !== undefined) {
        this.$refs.tree.setChecked(currentNode.parent, true)
        this.selectedParent(currentNode.parent)
      }
    },