elementUI el-tree父节点选中禁用子节点

如何实现el-tree父节点选中的时候，子节点全部禁用？
当父节点取消选中，子节点就恢复不禁用的状态

统一定义子节点的状态，当父节点发生变化时去改变一下定义的状态。
此处使用变量去控制

你可以在父节点的 node-click 事件中进行处理，如下所示：

<el-tree :data="data" node-key="id" ref="tree" :props="defaultProps" @node-click="handleNodeClick">
</el-tree>

methods: {
  handleNodeClick(node, data) {
    if (node.isLeaf) {
      // 处理叶子节点的选中
    } else {
      // 处理父节点的选中
      const children = data.children
      this.$refs.tree.setCheckedKeys(node.checked ? children.map(item => item.id) : [])
      this.$refs.tree.setDisabledKeys(node.checked ? children.map(item => item.id) : [])
    }
  }
}

这样在父节点选中的时候就会将子节点全部设置为禁用状态，取消选中就会将子节点恢复为不禁用的状态。

注意：在这里我们使用了 node-key 属性来指定每个节点的唯一标识，然后使用 setCheckedKeys 和 setDisabledKeys 方法来设置选中和禁用的节点。

• 文章：elementui el-tree复选框是否被选中 中也许有你想要的答案，请看下吧
• 除此之外, 这篇博客: Elementui el-tree 自定义节点内容、图标右移、修改某一节点对应背景色、展开或关闭所有节点等常用问题中的 去除子节点缩进 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  
• • 设置:indent="0"

方案一、element tree 组件有个check 选中事件，形参有个node。那个node就是你选中的node。然后写个递归去把它子集全部禁用就好了。内部有个属性修改一下就是。
方案二、用css伪类选择器，你勾选的父节点会多个class 。伪类找到那个 class 下面的所有 check 给他们都加一个 el 默认的类名。那个类名的作用就是禁选