el-tree实现父子节点不关联，包括禁用节点，父亲节点全选，父亲节点反选和总体全选反选，可以直接拿去用

1.父子不交互效果实现：

（1）节点的+标志是全选当前节点及子节点按钮

（2）修改标志是取消选中 前节点及子节点按钮

 

2.当前页面点击全选按钮效果：（犹豫包括一个未选中禁用节点，所以全选按钮没勾选）

 3.取消全选按钮效果：同上（犹豫包括一个未选中的禁用的节点）

 4.下面是全部代码，小伙伴们可以细心观看，直接拿过去用也是可以的，不过数据是写死的你们根据自己情况修改。

<template>
  <div>
    <el-checkbox v-model="checkecd" @change="checkedAll">
      全部
    </el-checkbox>
    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      node-key="id"
      :default-checked-keys="[1]"
      :default-expand-all="true"
      check-strictly //***声明该属性可以父子节点不关联***
      @check-change="checkChange" //树节点发生改变触发事件
    >
      <div slot-scope="{ node, data }">
        <template>
          <!-- 名称： 新增节点增加class（is-new） -->
          <span>
            {{ node.label }}
          </span>

          <!-- 按钮 -->
          <span>
            <!-- 全选 -->
            <el-button
              icon="el-icon-plus"
              title="全选"
              size="mini"
              circle
              type="primary"
              @click.stop="allcheck(data)"
              v-if="data.children"
            ></el-button>

            <!-- 取消全选 -->
            <el-button
              icon="el-icon-edit"
              title="取消全选"
              size="mini"
              circle
              type="info"
              @click.stop="caclecheck(data)"
              v-if="data.children"
            ></el-button>
          </span>
        </template>
      </div>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级 1',
          disabled: true,
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1',
            },
            {
              id: 8,
              label: '二级 3-2',
            },
          ],
        },
      ], // 树形数据
      levelData: [], // 拉平后的treeData
      checkecd: false, // 全选状态
    }
  },
  created() {
    this.getLevelData()//拉平数据
    this.checkChange()//先检测一遍当前全选了没
  },
  methods: {
    allcheck(data) {
      //子节点全选
      console.log(data)
      this.dgTree([data], 1) //调用递归(2代表子节点全部取消选中) **[data]是因为当前父亲最外层是{}不是数组，所有要包一层[]不然会报错
    },
    caclecheck(data) {
      //子节点取消全选
      this.dgTree([data], 2) //调用递归(2代表子节点全部取消选中)
    },
    dgTree(data, type) {
      //递归当前选中和取消按钮的数据
      data.forEach((item) => {
        if (type == 1) {
          //type==1选中
          if (item.disabled != true) {
            //如果当前节点不禁用,选中
            this.$refs.tree.setChecked(item, true)
          }
        } else {
          if (item.disabled != true) {
            //如果当前节点不禁用,不选中
            this.$refs.tree.setChecked(item, false)
          }
        }
        if (item.children) {
          this.dgTree(item.children, type)
        }
      })
    },

    // 获取拉平后的数据
    getLevelData() {
      let cloneData = JSON.parse(JSON.stringify(this.treeData))
      this.levelData = this.recursion(cloneData)
    },
    // 全选、反选
    checkedAll() {
      if (this.checkecd) {
        this.dgTree(this.treeData, 1)
      } else {
        this.dgTree(this.treeData, 2)
      }
      this.checkChange() //再次检测是否全选了
    },
    // 树结构勾选
    checkChange(item, isChecked) {
      // 获取勾选的数据
      let checkNode = this.$refs.tree.getCheckedKeys() //获取当前所有选中的节点
      // 如果勾选数量===拉平后的treeData的数量 那么相当于全选 反之则是反选
      // 如果小于数组数量则是半选
      if (checkNode.length === this.levelData.length) {
        //如果所有选中节点的长度==拉平树的数量，那么当前是全选
        this.checkecd = true
      } else if (checkNode.length === 0) {
        //如果所有选中节点的长度==0，那么当前未全选
        this.checkecd = false
      } else if (checkNode.length < this.levelData.length) {
        //如果所有选中节点的长度==小于拉平的长度，那么当前未全选
        this.checkecd = false
      }
    },
    // 递归调用
    recursion(arr) {
      //递归平铺树形结构来获取当前树节点长度多少
      return [].concat(
        ...arr.map((item) => {
          if (item.children) {
            let arr = [].concat(item, ...this.recursion(item.children))
            delete item.children
            return arr
          }
          return [].concat(item)
        }),
      )
    },
  },
}
</script>
<style>
.el-button--mini.is-circle {
  padding: 0.03rem !important;
}
</style>

最后感觉对自己有用可以点个赞，本人也是个菜鸟，给个鼓励谢谢大家!