当前位置: 首页 > Web前端 > vue.js

ElementUITree组件,实现自定义勾选父子选项

时间:2023-03-31 21:14:06 vue.js

[toc]创建时间:2020-11-02为什么要自定义check而不是使用自己的check?当设置:checkbox和check-strictly=false(默认)父子关联时,会出现:选择parent,勾选所有child选项;取消父选项,同时取消子选项。勾选子选项,父选项变为半选。如果选中所有子选项,则选择父选项。当设置了checkbox和check-strictly=true时,parent和child没有关联,会出现:parent的选中和取消选中不会影响child选项的状态对selectionandunchecked有任何影响取消子选项,不会对父选项的状态产生任何影响。总结以上现象:如果只想单独选中parent选项,不选中任何子选项,功能无法实现,soImplementationstepsusingcustomcheckbox由于使用了自定义checkbox,check-strictly=true父子无关的html代码">

当前选中{{cusChecked}}

vue代码数据(){return{defaultProps:{children:'children',label:'label'},treeData:[{id:1,label:'一级',children:[{id:4,label:'中四',children:[{id:9,label:'Level39'},{id:10,label:'Level310',children:[{id:11,label:'Level411'},{id:12,label:'Level4Level12'}]}]}]}],cusChecked:[]}}handleCheck(currentNode,treeStatus){console.log(currentNode,treeStatus)/***@des根据父元素的check或uncheck,对待所有孩子都被选中或未被选中*@param{node:Object}当前节点*@param{status:Boolean}(true:handleaschecked;false:handleunselected)*/constsetChildStatus=(node,status)=>{/*这里的idchildren也可以是其他字段,可以根据实际业务更改*/this.$refs.cusTreeRef.setChecked(node.id,status)if(node.children){/*循环递归处理child节点*/for(leti=0;i{/*获取树组件中的节点,使用该方法的原因是第一次传入的节点没有父节点*/constnode=this.$refs.cusTreeRef.getNode(nodeObj)if(node.parent.key){this.$refs.cusTreeRef.setChecked(node.parent,true)setParentStatus(node.parent)}}/*判断当前点击是否选中或取消选中操作*/if(treeStatus.checkedKeys.includes(currentNode.id)){setParentStatus(currentNode)setChildStatus(currentNode,true)}else{/*取消选中*/if(currentNode.children){setChildStatus(currentNode,false)}}this.cusChecked=[...this.$refs.cusTreeRef.getCheckedKeys()]}代码核心功能说明:判断点击是选中操作还是未选中操作.如果选中,则递归取消选中如果其父项及其所有子选项均未选中,则递归将子选项的状态更改为未选中欢迎来到Github