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;}
}

取消单个选中状态

 // 取消选择 应该用 setCheckedthis.$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;
}