有两种方法:显示check radio 但是不能选中父节点,只能选中子节点;另一种方法是直接不显示父节点的check radio
一、是在callback里写回调方法,都是显示check radio的,有两种情况,一种是不可选择,一种是判断是否是父节点,是的话直接返回
callback: {
beforeCheck: this.zTreeBeforeCheck,//在选择前
onClick: this.zTreeOnClick // 单击节点
}
zTreeBeforeCheck(treeId, treeNode) {
//一、是父节点 返回false,不可选择
return !treeNode.isParent;
},
zTreeOnClick(event, treeId, treeNode) {
//二、在点击节点时判断是不是父节点。是的话直接返回
if(treeNode.isParent) return this.$message.warning('请选择子节点!')
treeObj.checkNode(treeNode, !treeNode.checked, true);
},
二、另一种写法是通过pid来判断的,直接不显示父节点的check radio,效果如图
代码如下
this.$store.dispatch('SysFolder/getFileTree', this.key).then(() => {
treeObj = $.fn.zTree.init($("#equipTree"), setting, this.$store.state.SysFolder.treeList);
let nodeAll = treeObj.transformToArray(treeObj.getNodes());
let node;
for(let i = 0;i < nodeAll .length;i++){
let id = nodeAll [i].id;
for(let j = 0;j < nodeAll .length;j++){
if(id == nodeAll [j].pid){
node = treeObj.getNodeByParam("id", id, null);
node.nocheck = true;//不显示check radio
treeObj.updateNode(node);//更新节点
}
}
}
setTimeout(() => {
this.isloading = false;
this.isTree = true;
treeObj.expandAll(true);
}, 300);
}
三、根据具体需要展示可选中节点
eg:有个类别树,只可选中三级节点,如图
可根据上面方法可以设置只有子节点选中,其实只有节点时也可以选中的
此时就可以根据需求来判断一级,二级节点是否可以选中了,当然返回的数据中要有标识(此处是levels),只根据id和pid是不能判断出的。
// 当节点是一级或二级时,也不显示check节点
if (nodeAll[i].levels === '一级' || nodeAll[i].levels === '二级') {
node = this.treeObj.getNodeByParam('id', id, null)
node.nocheck = true // 不显示check radio
this.treeObj.updateNode(node) // 更新节点
}