vue tree全选

trre代码

     <div class="checkedBox">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
              >全选</el-checkbox
            >
          </div>

          <el-tree
            :data="permissionsList"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            :default-checked-keys="checkedRoleList"
            @check-change="handleCheckChange"
          >
          </el-tree>

方法

    // 全选
    handleCheckAllChange() {
      if (this.checkAll == true) {
        this.$refs.tree.setCheckedNodes(this.permissionsList);
        this.checkedList = this.$refs.tree.getCheckedNodes();
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

  handleCheckChange() {
      // tree 结构转化成一维数组
      const result = [],
        getRoleId = arr => {
          arr.forEach(v => {
            result.push(v.id);
            if (v.children instanceof Array) {
              getRoleId(v.children)
            }
          });
        }
      getRoleId(this.permissionsList);
      let getCheckedList = this.$refs.tree.getCheckedNodes();
      // 比较
      if (result.length == getCheckedList.length && getCheckedList.length != 0) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
    },