element UI el-tree回选问题

使用el-tree来绘制角色权限，如图：

image.png

一般都是将选择treeList的id组发给后端，如：[11111111,22222222222,3333333333333,4444444444444]，这里会出现一个问题，得先跟后端沟通好，就是半选问题，何为半选呢？看图：（后台一般需要给传半选和全选）

image.png
半选节点就是有子节点且子节点没有完全被选中的节点。
假设后端要求你把半选节点也要传过去

你可以通过以下代码获取已选中的节点和半选节点

  // ref 是el-tree
  let list = this.$refs.tree.getCheckedKeys()
  const halfList = this.$refs.tree.getHalfCheckedKeys()
  list = [...list, ...halfList]

  // or 
   this.$refs.tree.getCheckedNodes(false, true).map(item => item.id)

接下来就是把该数据传给后端就行了，新增这样就可以啦。

但是编辑的时候问题来了，一般情况下后台会返回你传给他的数据，这里面包含了半选节点的数据，但是设置el-tree的时候，它才不知道你是不是半选节点，就会导致原来的半选节点现在帮你全部把该节点及子孙节点全部选中了，琢磨了好久，终于发现一个可以解决的：

        this.treeList = await getTreeDate()  // 这个是拿到的树的所有数据
        const list = await getResource({ roleId: row.id })  // 这个是根据该角色拿到的tree数据
        const roleTreeList = treeTool.toList(list).map(item => item.id)  // 得到[111,222,3333] 的数据
        this.$nextTick(() => {   // 这个一定不能省略，因为第一次获取 this.$refs.tree可能是null
          roleTreeList.forEach((item, n) => {
            const node = this.$refs.tree.getNode(item)
            if (node.isLeaf) {
              this.$refs.tree.setChecked(node, true)
            }
          })
        })

一般在详情里面回显  后台回返回来半选和全选的id，（roleTreeList后台返回来的数据）然后根据这个数据来控制（）
 this.$nextTick(() => {   // 这个一定不能省略，因为第一次获取 this.$refs.tree可能是null
          roleTreeList.forEach((item, n) => {
            const node = this.$refs.tree.getNode(item)
            if (node.isLeaf) {
              this.$refs.tree.setChecked(node, true)
            }
          })
        })

这样就可以回显了