【随记】-【UI框架】element和antd tree组件 组件使用———半选回显问题

因为父子节点会关联，回显半选菜单，会自动把子菜单全部选中。导致显示与实际不一致，下面分析问题

以前使用elementUI，遇到el-tree组件，涉及节点可选择（多是权限系统的），一般是这样的

首先说明一下前后端的数据需求，显示用的treeData 就不说明了。 前端展示用的数据:(包含父子级)

let ids = [1,2,3,4,5,6]

后端传来的：(平铺型)，children 也一样，都可以

let res = [
{id:1,pid:null,name:'首页'},
{id:2,pid:null,name:'数据分析'},
{id:21,pid:2,name:'城市数据'},
{id:22,pid:2,name:'环境数据'},
...
]

修改接口需要的： let ids = [1,2,3,4,5,6]

回显时，我们把res转换成 children结构的，方法自己写、网上都有。 变成了：

let resTans = [
{id:1,pid:null,name:'首页',children:[]},
{id:2,pid:null,name:'数据分析',children:[
    {id:21,pid:2,name:'城市数据',children:[]},
    {id:22,pid:2,name:'环境数据',children:[]},
]},
...
]

前面准备工作做好了

在antd 的 a-tree 组件中

我们把checkStrictly 属性设置为false，默认就是false，

官网描述：checkStrictly：checkable 状态下节点选择完全受控（父子节点选中状态不再关联）

那么我们只要把符合两个条件的id取出来就可以了

1. children 长度为0的，直接取id
2. children 长度不为0 ， 就把他所有的子级id全部取出来。因为checkStrictly是false,所以children 大于0的项的父级会自动半选自身。 然后只要把回显的resTans id取出来给 a-tree就行

          if(item.children.length>0){
            item.children.forEach((item2)=>{
              this.checkedKeys.push(item2.id)
            })
          }else{
            this.checkedKeys.push(item.id)
          }

这个时候 this.checkedKeys 就是正确回显的了，当然记得 修改时 要把半选的状态的也要传给后端~