总结了两种方法:
一、父级的复选框禁用
<el-tree
:data="deptOptions"
node-key="id"
:props="defaultProps"
:expand-on-click-node="true"
:filter-node-method="filterNode"
:check-strictly="true"
show-checkbox
ref="tree"
@check="handleNodeClick"
/>
<script>
export default{
data:{
defaultProps:{
children:'children',
label:'name',
disabled:function(data,node){
if(data.children&&data.children.length>0){
return true
}else{
return false
}
}
}
},
methods:{
handleNodeClick(data,checked, node){
if(checked){
this.$refs.tree.setCheckedNodes([data]);
}
},
}
}
</script>
二、隐藏父级的复选框,css大法好嘢,真的好嘢
<el-tree
:data="deptOptions"
node-key="id"
:props="defaultProps"
:expand-on-click-node="true"
:filter-node-method="filterNode"
:check-strictly="true"
show-checkbox
ref="tree"
@check="handleNodeClick"
/>
<style lang="scss" scoped>
::v-deep .el-tree {
// 不可全选样式
.el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner {
display: none;
}
}
}
</style>