Tree 树形控件 通过css切换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;
}