Element UI el-tree树形菜单子级取消选中后父级选中效果不变
网上搜了很多案例,但没有符合要求的,根据其中一个案例改编如下:
主要实现效果图:
主要逻辑如下:父级点击选中或取消时,子级全部选中或取消。子级选中后 所有的父级是选中效果,子级取消选中后,父级仍是选中效果。
主要代码示例如下:
<el-tree ref="treeFrom" :data="treeData" show-checkbox node-key="id" check-on-click-node :default-expand-all="true" :check-strictly="true" :expand-on-click-node="false" @node-click="nodeClick"> </el-tree>
数据格式如下:
treeData: [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ id: 9, label: '三级 1-1-1', children: [{ id: 11, label: '四级 1-1-1', }] }, { id: 10, label: '三级 1-1-2' }, { id: 12, label: '三级 1-1-3' }, ] }] }, { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' }] }, { id: 3, label: '一级 3', children: [{ id: 7, label: '二级 3-1' }, { id: 8, label: '二级 3-2' }] }],
主要方法如下:
methods:{ nodeClick(data, node){ this.childNodesChange(node); this.parentNodesChange(node); //获取所有选中节点 console.log(this.$refs.treeFrom.getCheckedNodes()) }, // 子级操作递归 childNodesChange(node){ let len = node.childNodes.length; if(len > 0){ for(let i = 0; i < len; i++){ if(!node.checked){ node.childNodes[i].checked = false; }else{ node.childNodes[i].checked = true; } this.childNodesChange(node.childNodes[i]); } } }, // 父级递归 parentNodesChange(node){ if(node.parent){ for(let key in node){ if(key == "parent"){ node[key].checked = true; this.parentNodesChange(node[key]); } } } }, }
修改组件自定义样式(不写此样式,选中效果无效)
<style> .el-tree-node__label{ position: relative; } .el-tree-node__label:before{ content:''; width:20px; height: 20px; display: block; position:absolute; top:0px; left:-24px; z-index:999; } .el-checkbox__inner{ top:0; } </style>