基于vue的element树形组件

最近项目使用到了异步树，异步树的存在是解决树型结构下数据过多的问题而诞生的，即点一次加载一次

多选异步树

html

<el-tree
        ref="tree"
        :props="props"
        node-key="userIndexCode"
        :load="loadNode"
        :highlight-current="false"
        lazy
        show-checkbox
        @check-change="handleCheckChange">
      </el-tree>

props配置选项
node-key每个树节点用来作为唯一标识的属性
:load加载子树数据的方法
:highlight-current是否高亮当前选中节点
@check-change节点选中状态发生变化时的回调

一般说来，有上面几个方法和参数就足够构造树了

JS

loadNode (node, resolve) {
      // 判断是否根节点
      if (node.level === 0) {
        API.getTree({ id: '-1' }).then((res) => {
          // 发送请求返回结果
          // 解析成标准的data结构
          resolve(data)
        })
      } else {
        API.getTree({ id: node.data.id }).then((res) => {
          // 发送请求返回结果
          // 解析成标准的data结构
          // 这里的树如果有部门和人员，需要在props里面加上 isLeaf: 'leaf' 本例中obj是节点，userobj是叶子节点
          // 构造数组的时候 叶子节点 也需要加上leaf:true
          resolve(obj.concat(userobj))
        })
      }
    }

this.$refs.tree.getCheckedNodes()方法使用的坑

在实际使用中，发现如果节点下面有内容的话，this.$refs.tree.getCheckedNodes可以正常使用
但是如果节点下面无内容而且选中的话，this.$refs.tree.getCheckedNodes(true,true)会把节点也计算在内
针对这个组件问题，使用leaf是否是叶子节点来过滤一次就可以了

this.$refs.tree.getCheckedNodes(true, true).map((value) => {
        if (value.leaf) {
          this.checkList.push(value)
        }
      })