element的tree树形菜单回显、父级半勾选

解决的问题： 

1、 当拿到了后台的数据，使用id去渲染选中的节点时，如果父级id包含在id数组里，而此id下面的子节点只有部分选中的情况下，此父级id下面得所有子节点全部被选中了。

2、 当需要保存当前选中的节点id时，拿不到半选中的父级id。

<el-tree
        ref="tree"
        v-loading="loading"
        :data="data"
        :props="defaultProps"
        :show-checkbox="showCheckBox"   // 展示复选框
        node-key="id"                   // 如果需要通过 key 来获取或设置，则必须设置node-key 即可以设置为id
        @node-expand="handleNodeExpand"
        @check-change="handleCheckChange"
      />

data: [{
          id: 1,
          label: '一级 1',
　　　　　　select: true,
          children: [{
            id: 4,
            label: '二级 1-1',
　　　　　　　select: false,
            children: [{
              id: 9,
              label: '三级 1-1-1',
　　　　　　　　 select: false
            }, {
              id: 10,
              label: '三级 1-1-2',
　　　　　　    select: true
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
　　　　　　select: true,
          children: [{
            id: 5,
            label: '二级 2-1',
            select: false
          }, {
            id: 6,
            label: '二级 2-2',
　　　　　　　select: false
          }]
        }, {
          id: 3,
          label: '一级 3',
　　　　　　select: true,
          children: [{
            id: 7,
            label: '二级 3-1',
　　　　　　  select: true
          }, {
            id: 8,
            label: '二级 3-2',
　　　　　　　select: false
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };

data为后台拿到的数据结构 select为判断这个节点是否为选中的状态，通过递归的方式将所有选中的数据的id放在数组this.checkedKeys里面

getSelectKey(list) {
      this.data.map((ele, index) => {
        if (ele.select) {
          this.checkedKeys.push(ele.id)
        }
        if (ele.childs.length > 0) {
          this.getSelectKey(ele.children)
        }
      })
    },

拿到所有选中的id之后

checkedKeys(val) {
      this.$refs.tree.setCheckedKeys([])   // 先清空选中
      this.$nextTick(() => {
         const that = this
          val.forEach((i, n) => {
            const node = that.$refs.tree.getNode(i)
            if (node.isLeaf) {
              that.$refs.tree.setChecked(node, true)
            }
          })
      })
    }

这样就将选中的数据渲染出来了

 

 基本上能拿到类似这样的效果，上面的数据是乱写的 这里只做展示效果

最后想要拿到最后选中的数据的集合

handleCheckChange() {   // tree勾选的方法
      // 勾选的key
      const checkedKeys = this.$refs.tree.getCheckedKeys()
      // 暂选状态的母tab的key
      const halfKeys = this.$refs.tree.getHalfCheckedKeys()
      // 合并两个数组
      const save = checkedKeys.concat(halfKeys)
      this.$emit('allSelectedKeys', save)
    },

这样就能够拿到半勾选的父级的id的此id下面选中的数据的id了