場景

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

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

在上面已經(jīng)實(shí)現(xiàn)的部門多選樹的效果為

?

現(xiàn)在要實(shí)現(xiàn)的效果為，鼠標(biāo)單擊樹節(jié)點(diǎn)時(shí)直接能實(shí)現(xiàn)點(diǎn)擊左邊的勾選框的效果。

即不用點(diǎn)擊勾選框則能直接實(shí)現(xiàn)勾選效果，提高用戶體驗(yàn)，具體效果如下

?

注：

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

實(shí)現(xiàn)

在上面的博客中實(shí)現(xiàn)了多選樹節(jié)點(diǎn)實(shí)現(xiàn)的效果。

設(shè)置多選框的改變事件是通過設(shè)置

@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)},

能通過參數(shù)直接獲取選中所有的節(jié)點(diǎn)

同理設(shè)置節(jié)點(diǎn)的點(diǎn)擊事件

@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"/>

然后對應(yīng)的具體的事件實(shí)現(xiàn)

????? handleNodeCheck(data, checked){let getCheckedNodes = this.$refs.tree.getCheckedNodes();//獲取之前選中的節(jié)點(diǎn)let dataNodes = tree([],data);//獲取當(dāng)前選中的節(jié)點(diǎn)let getCheckedNodestemp = {};//用于判斷之前選中的節(jié)點(diǎn)是否存在當(dāng)前選中的節(jié)點(diǎn)的子節(jié)點(diǎn)let delgetCheckedNodestemp = 'false';用于判斷之前選中的節(jié)點(diǎn)是否存在當(dāng)前選中的節(jié)點(diǎn)的子節(jié)點(diǎn)getCheckedNodes.map((item,index)=>{getCheckedNodestemp[item.id] = true})let dataNodestemp = {};//用于判斷當(dāng)前選中的節(jié)點(diǎn)為父節(jié)點(diǎn)時(shí)是否取消勾選該父節(jié)點(diǎn)下所有子節(jié)點(diǎn)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);//合并成一個(gè)數(shù)組let temp = {};//用于id判斷重復(fù)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 = [];//只保留最后一級子節(jié)點(diǎn)的參數(shù)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);}

即可實(shí)現(xiàn)如上效果。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。