<el-tree
ref="menuTree"
:data="menuTreeList"
:check-strictly="true"
show-checkbox
node-key="id"
highlight-current
:filter-node-method="filterNode"
@node-click="nodeClick"
@check-change="handleCheckChange"
default-expand-all/></el-tree>
//由于nodeClick被调用时checkChange也会被调用,因此需要一个editCheckId辅助避免出现因为联动导致选中状态错乱
nodeClick(data, node, v) {
this.editCheckd = data.id
//this.$refs.menuTree.setCheckedKeys([data.id]);
this.menu.parentId = data.parentId || null;
this.menu.productId = data.id;
this.menu.typeName = data.typeName;
this.menu.typeCode = data.typeCode;
this.menu.status = data.status;
this.menu.sort = data.sort;
this.$refs.form.clearValidate();
},
handleCheckChange(item,checked,self){
if(checked){
this.editCheckd = item.id
this.$refs.menuTree.setCheckedKeys([item.id]);
// this.nodeClick(item)
}else{
if(this.editCheckd === item.id){
this.$refs.menuTree.setCheckedKeys([item.id]);
}
}
},
查阅链接:
Vue单页应用中Element ui中的el-tree单选功能 - 简书