解决el-tree数据回显时子节点部分选中，父节点都全选中的坑

雨点打透心脏的1/2处 2022-10-22 12:59 334阅读 0赞

`el-tree` 在编辑中回显数据时，有一个bug，就是只要我们回显的数据中有父节点的 `id`，不管当前父节点下的子节点是部分选中还是全选中，回显的效果是该父子节点下的子节点都会全选中，这很显然不是我们需要的

看大家有用自己的办法解决，比如有说用 `check-strictly` 来控制父子互不互相关联的做法，还有自己手动写函数来控制父子节点的选中状态，但是方法多感觉很繁琐。

我这里用 `getNode()` 的方法来简单解决  
预计的效果

![在这里插入图片描述][20210317153417680.png]

目前实际效果  
![在这里插入图片描述][20210317153445129.png]  
先上代码看如何实现

template 部分

<el-tree :data="list.data" show-checkbox node-key="id" :props="defaultProps" :default-expand-all="list.isExpand" v-loading="list.loading" ref="tree" @check-change="checkChange">
     </el-tree>

js 部分

export default { 
      data () { 
        return { 
          list: { 
            data: [],
            loading: false,
            isExpand: true
          },
          defaultProps: { 
            children: 'children',
            label: 'name'
          },
          loading:false
        }
      },
      methods: { 
        defaultChecked () {  // 默认选中
          this.$nextTick(() => { 
            const arr = []
            this.menus.forEach(item => { 
              if (!this.$refs.tree.getNode(item.id).childNodes || !this.$refs.tree.getNode(item.id).childNodes.length) { 
                arr.push(item.id)
              }
            })
            this.$refs.tree.setCheckedKeys(arr)
          })
        },
      }
    }

![在这里插入图片描述][20210317154112659.png]

解析：`this.menus` 是从后端获取回来的数据，`getNode()` 获取到当前节点，判断当前节点是否是叶子节点，是的话存入 `arr` 数组中，最后使用 `setCheckedKeys()` 将数据回显选中，从而实现父级的半选状态

打印了一下Node 节点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]

[20210317153417680.png]: /images/20221022/bfc02c6098444d2195c6dd0c34fcc413.png
[20210317153445129.png]: /images/20221022/c884510453dd467dbc119633dd62dc41.png
[20210317154112659.png]: /images/20221022/679dfc1d568c40798c986d97cd6a46f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221022/218d165793234f1e884e1702675c088e.png