場景

ElementUI中el-tree控件封裝公共控件(部門列表)并請求后臺數據獲取父子級數據并構建成前端數據結構數據：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107862515

在上面已經實現的部門多選樹的效果為

?

現在要實現的效果為，鼠標單擊樹節點時直接能實現點擊左邊的勾選框的效果。

即不用點擊勾選框則能直接實現勾選效果，提高用戶體驗，具體效果如下

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

在上面的博客中實現了多選樹節點實現的效果。

設置多選框的改變事件是通過設置

@check="handleCheck"

然后在事件中

????? handleCheck(data, checked){let deptIdList = [];for(let i = 0;i<checked.checkedNodes.length;i++){if(!checked.checkedNodes[i].children){deptIdList.push(checked.checkedNodes[i].id)}}this.$emit('handleCheck', deptIdList)},

能通過參數直接獲取選中所有的節點

同理設置節點的點擊事件

@node-click="handleNodeCheck"

添加的地方為

??? <el-tree:data="deptOptions":props="defaultProps":expand-on-click-node="false":filter-node-method="filterNode"ref="tree"show-checkboxnode-key="id":default-expanded-keys="zKOptions"@check="handleCheck"@node-click="handleNodeCheck"/>

然后對應的具體的事件實現

????? handleNodeCheck(data, checked){let getCheckedNodes = this.$refs.tree.getCheckedNodes();//獲取之前選中的節點let dataNodes = tree([],data);//獲取當前選中的節點let getCheckedNodestemp = {};//用于判斷之前選中的節點是否存在當前選中的節點的子節點let delgetCheckedNodestemp = 'false';用于判斷之前選中的節點是否存在當前選中的節點的子節點getCheckedNodes.map((item,index)=>{getCheckedNodestemp[item.id] = true})let dataNodestemp = {};//用于判斷當前選中的節點為父節點時是否取消勾選該父節點下所有子節點dataNodes.map((item,index)=>{if(item.children){item.children.map((item2,index2)=>{if(getCheckedNodestemp[item2.id]){delgetCheckedNodestemp = 'true';}})item.children.map((item3,index3)=>{if(delgetCheckedNodestemp === 'true'){dataNodestemp[item3.id] = true}})}})let newData = getCheckedNodes.concat(dataNodes);//合并成一個數組let temp = {};//用于id判斷重復let result = [];newData.map((item,index)=>{if(!temp[item.id] && !dataNodestemp[item.id] ){result.push(item);temp[item.id] = true}else{result.map((item2,index2)=>{if(item2.id === item.id){result.splice(index2,1);}})}})let handleChecked = {};handleChecked.checkedNodes = [];//只保留最后一級子節點的參數for(let i = 0;i<result.length;i++){if(!result[i].children){handleChecked.checkedNodes.push(result[i])}}this.$refs.tree.setCheckedNodes(handleChecked.checkedNodes)this.handleCheck(data,handleChecked);}

即可實現如上效果。

總結

以上是生活随笔為你收集整理的若依前后端分离版实现基于el-tree实现选中部门树节点同步选中多选框的操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。