vue+elementui-tree动态禁用树节点

时间：2023-03-28 12:10:41 HTML

项目需求：新增：打开目录树，选中目标节点，顶部显示标签列表容器增加：打开目录树，禁用最后选中的节点，操作剩余节点项目准备：Vue脚手架elementui项目代码:这里只贴出关键部分代码可以提供参考，直接复制粘贴是运行不了的！！！{{item.name}}

letvm=newVue({el:"#test",data(){return{isShowTree:false,//是否显示树filterText:"",//过滤关键字treeData:[],//树数据defaultProps:{children:"children",label:"name",},tagData:[],//标签列表defaultCheckedKeys:[],//树型默认选中节点};},watch:{filterText(val){this.$refs.tree.filter(val);},isShowTree(val){this.defaultCheckedKeys=this.tagData.map((item)=>item.id);},},methods:{/***请求树数据*@returns树数据*/getTreeData(){return[{id:1,name:"一级目录",type:"cateTree",children:[{id:11,name:"二级目录-1",type:"cateTree",children:[],},{id:12,name:"二级目录-2",type:"cateTree",children:[{id:121,name:"三级目录-1",type:"cateTree",children:[],},{id:122,name:"三级目录-2",type:"cateTree",children:[],},{id:123,name:"三级目录-3",类型：“cateTree”，孩子们：[],},],},{id:13,name:"SecondaryDirectory-3",type:"cateTree",children:[],},{id:14,name:"SecondaryDirectory-4",type:"cateTree",孩子们:[{id:141,name:"三级目录-1",type:"cateTree",children:[],},{id:142,name:"三级目录-2",type:"cateTree",children:[],},],},],},];},/***搜索树节点*@param{*}value*@param{*}data*@returnsBoolean*/filterNode(value,data){if(!value)returntrue;返回data.name.indexOf(value)!==-1;},/***检查树节点*@param{*}item当前选中的节点数据*@param{*}选中是否被选中*@param{*}indeterminate是否所有子节点都被选中*/handleCheckChange(item,checked,indeterminate){if(!checked)this.tagData=this.tagData.filter((it)=>it.id!==item.id);if((!item.children||item.children.length==0)&&checked){让isExisted=this.tagData.find((it)=>it.id==item.id);如果（！isExisted）this.tagData.push（项目）；}},/***deletetag*@param{*}itemisRemoveitemdata*/removeTag(item){this.tagData=this.tagData.filter((it)=>it.id!==item.ID）;如果(this.$refs.tree){this.$refs.tree.setCheckedNodes(this.tagData);}},/***disablednode*@param{*}data*@param{*}idvalueisnotundefinedtosetdisablednode;否则，清除禁用节点*/setDisabledTreeData(data,id){letval=id!==undefined?真假;data.map((item)=>{if(id==undefined||item.id==id){this.$设置（项目，“禁用”，val）；}让isFatherNode=item.children&&item.children.length>0;isFatherNode&&this.setDisabledTreeData(item.children,id);让isHadDisabledChild=isFatherNode&&item.children.some((it)=>it.disabled&&it.disabled==val);if(isHadDisabledChild)this.$set(item,"disabled",val);});},/***获取禁用节点树数据*/getDisabledData(){this.defaultCheckedKeys=tagData.map((item)=>item.id);this.defaultCheckedKeys.map((item)=>this.setDisabledTreeData(this.treeData,item));},/***取消*/handleClose(){this.tagData=[];//清除标签this.defaultCheckedKeys=[];//清除树默认检查节点if(this.$refs.tree)this.$refs.tree.setCheckedNodes(this.tagData);//清除选中的树节点this.isShowTree=false;//关闭树this.setDisabledTreeData(this.treeData,undefined);//清除树节点中的禁用状态},},});目标效果：新增：新增：