Tree 树形控件 父级不显示复选框并且show-checkbox可以切换单选多选

Tree 树形控件
用清晰的层级结构展示信息，可展开或折叠。

如何让父级不显示复选框

.el-tree {

  .el-tree-node {
  // css 让父级不现实checkbox
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }
}

show-checkbox怎么出单选效果

@check-change="handleNodeClick"
handleNodeClick(data, checked) {
   if (checked) {
     this.$refs.treeForm.setCheckedKeys([data.id]);
   }
   // 可以监听一下type 是单选的时候清空一下  
   // this.$refs.treeForm.setCheckedKeys([]);
   // 获取的值 里面有null 可以filter一下
   this.$refs.treeForm.getCheckedKeys().filter(item => { return item; });
 }

怎么根据需求选择切换单选复选效果

改变复选框的边框 变成单选框

class 可以三元判断

handleNodeClick 里可以添加条件判断 checked&&type===‘radio’

.treeForm{
   .el-checkbox__inner{
   border-radius: 8px;
 }
}

取消单个选中状态

 // 取消选择 应该用 setChecked
 this.$refs.treeForm.remove(id); // 删除当前节点
 this.$refs.treeForm.setChecked(id, false); // 取消当前节点的选中状态

树结构 全选 反选 取消反选

<el-checkbox v-model="checked" @change="isAllChecked">全选</el-checkbox>
isAllChecked() {
  if (this.checked) {
    this.$refs.treeForm.setCheckedKeys(this.getAllNodes(this.departmentList.deptControlTree)); // 全选节点
  } else { // 取消选中
    this.$nextTick(() => {
      this.$refs.treeForm.setCheckedKeys([]);
    });
  }
},

需要递归
getAllNodes 获取所有节点
checkedKeyLists 选中节点

// @check-change="handleNodeClick"
this.checked = this.checkedKeyLists.length === this.getAllNodes(this.departmentList.deptControlTree).length ? true : false;

 // 递归所有节点的信息
getAllNodes(node = [], arr = []) {
  for (const item of node) {
    arr.push(item.value);
    const parentArr = [];
    if (item.childrenList) parentArr.push(...item.childrenList);
    if (parentArr && parentArr.length) this.getAllNodes(parentArr, arr);
  }
  return arr;
}