Element Tree 实现展开/折叠、全选/全不选、父子关联组件封装

话不多说 直接上效果图。

  <div class="treeStyle">
    <div>
      <el-checkbox label="展开/折叠" @change="handleCheckExpand"></el-checkbox>
      <el-checkbox label="全选/全不选" @change="handleSelectAll"></el-checkbox>
      <!-- 父子联动  默认是联动的 点击子组件父组件也勾选 -->
      <el-checkbox
        label="父子联动"
        @change="handleCheckStrictly"
      ></el-checkbox>
    </div>
    <el-tree
      ref="tree"
      v-loading="loading"
      v-model="deptIds"
      :data="treeList"
      show-checkbox
      node-key="id"
      :default-expand-all="isExpand"
      :check-strictly="isCheckStrictly"
      highlight-current
      :props="typeProps"
      @check="
        (click, checked) => {
          handleCheckChange(click, checked);
        }
      "
    >
    </el-tree>
  </div>

展开/折叠

其中展开无非就是动态绑定一个值isExpand给default-expand-all，从而实现展开/折叠的切换

我们要先调用builData函数，它会遍历树的每一个节点，然后将每一个树结点的expanded属性绑定isExpand，就可以实现勾选框来控制 展开/折叠啦。最后再_getAllNodes一波获取所有的树节点，就可以搞定了

    //遍历树的所有子节点，展开的时候给子节点展开状态赋值true，折叠时候赋值false
    buildData() {
      this.loading = true;
      const setExpanded = (nodes) => {
        nodes.forEach((node) => {
          node.expanded = this.isExpand;
          // 如果当前节点有子节点，递归调用setExpanded
          if (node.children && node.children.length > 0) {
            setExpanded(node.children);
          }
        });
      };

      // 使用递归函数setExpanded处理所有节点
      setExpanded(this.$refs.tree.store._getAllNodes());
      this.loading = false;
    },

//  折叠/展开   
 handleCheckExpand(value) {
      if (value) {
        this.isExpand = true;
        this.buildData();
      } else {
        this.isExpand = false;
        this.buildData();
      }
    },

父子联动

父子联动也比较好理解，我们默认情况下是父子不联动，即勾选了子节点，父节点不会勾选。当我们勾选了父子联动后，勾选了子节点，父节点也是会跟着一起勾选的

注意：官方文档中的check-strictly默认值是false,即是父子关联，而在我们勾选框中此时是不勾选状态的（即是父子不关联），所有我们在handleCheckStrictly中设置了，当勾选框没有勾选的时候（父子不关联），isCheckStrictly 为false, 当勾选框勾选了（父子联动），那么isCheckStrictly设置为true。

                说实话。。。。。这里好像有点绕。。。。。

    // 父子联动
    handleCheckStrictly(check) {
      if (check) {
        this.isCheckStrictly = true;
      } else {
        this.isCheckStrictly = false;
      }
    },

全选/全不选

要实现全选的话，主要就是通过 lookForAllId 遍历找出所有节点的ID，然后通过setCheckedKeys去手动设置整个选择树的勾选状态，注意要搭配node-key属性使用才生效，我们前面已经将node-key设置为了每个节点的id，以下是全选/全不选的相关方法

    //遍历所有树节点 全选所有id
    lookForAllId(data = [], arr = []) {
      for (let item of data) {
        arr.push(item.id);
        if (item.children && item.children.length)
          this.lookForAllId(item.children, arr);
      }
      return arr;
    },

    handleSelectAll(check) {
      if (check) {
        // this.$refs.tree.setCheckedNodes(this.menuTree);
        let arr = this.lookForAllId(this.treeList, this.deptIds);
        this.$refs.tree.setCheckedKeys(arr);
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

最后还有一个无关紧要的方法，就是获取以选择结点的数组，也一起放上来吧

    // 获取选择的节点数组
    handleCheckChange(click, checked, index) {
      this.deptIds = checked.checkedKeys;
      console.log(this.deptIds,'deptIds')
    },