el-tree回显包含父节点子节点全部选中问题

原创已于 2023-09-13 10:38:02 修改 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-09-12 10:09:14 首次发布

文章讲述了在使用Element-UI的树形组件时，如何处理提交权限时全选和半选状态的数据，以及如何在回显时移除后台返回的父节点数据，以避免子节点被错误地选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做权限的时候，提交数据会把选中与半选中的数据提交给后台，但是在回显时后台返回的数据包含父节点，导致子节点全部选中。解决方法，在回显的时候把后台返回的数据中把所有的父节点给删掉这样就能解决问题。

提交全选与半选状态数据

<el-tree ref="orgTree" show-checkbox check-on-click-node :data="orgTree" :props="defaultProps" :default-checked-keys="checkedKeys" node-key="id" :expand-on-click-node="false" :destroy-on-close="true" />

 // 全选状态数据
 const checkedKeys = this.$refs.orgTree.getCheckedKeys()
 // 半选状态数据
 const halfSelected = this.$refs.orgTree.getHalfCheckedKeys()
 // 包含全选与半选状态的数据
 const saveCheckedKeys = checkedKeys.concat(halfSelected)

回显将含有父节点的数据给删除

a. tree 数据结构
在这里插入图片描述
b. 回显数据包含父节点

echoTree() {    
   this.clearParentOrgCode(this.orgTree)
   // this.orgCodes 后台返回的包含父节点数据 this.parentsCodes 父节点数据
   this.checkedKeys = this.removeArr(this.orgCodes, this.parentsCodes)
 },
 // 递归找寻父节点数据
 clearParentOrgCode(tree) {
   const orgCodes = this.orgCodes
   tree.forEach(item => {
     if (item.children && item.children.length > 0) {
       if (orgCodes.includes(item.id)) {
         this.parentsCodes.push(item.id)
       }
       this.clearParentOrgCode(item.children)
     }
   })
 },
 // 过滤数组
 removeArr(arr1, arr2) {
   return arr1.filter((item) => !arr2.includes(item))
 },