Element UI el-tree樹形選單子級取消選中後父級選中效果不變
阿新 • • 發佈:2022-03-16
網上搜了很多案例,但沒有符合要求的,根據其中一個案例改編如下:
主要實現效果圖:
主要邏輯如下:父級點選選中或取消時,子級全部選中或取消。子級選中後 所有的父級是選中效果,子級取消選中後,父級仍是選中效果。
主要程式碼示例如下:
<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>