element ui（饿了么）树组件懒加载节点和手工添加节点的方法。

我是通过vue-property-decorator使用typescript编码的。
懒加载或者动态加载文档上有例子，这里重复一下。手工添加节点没有，希望可以帮到大家。

element树

<el-tree ref="tree" node-key="id" :props="props" :load="loadNode" lazy
  @node-click="handleNodeClick" highlight-current
  :render-content="renderContentFunc">
</el-tree>

懒加载节点

  async loadNode(
    node: TreeNode<any, Category>,
    resolve: (cats: Category[]) => void
  ) {
    // NOTE: node.level != node.data.level, node.isLeaf != node.data.is_leaf
    if (node.level === 0) {
      const categories = await this.loadCategories(0);
      this.categories = categories;
      resolve(categories);
      return;
    }
    if (node.data.is_leaf) {
      resolve([]);
    } else {
      const categories = await this.loadCategories(node.data.id);
      node.data.children = categories;

      resolve(categories);
    }
  }

  async loadCategories(parent_id: number): Promise<Category[]> {
    return new Promise(function(resolve, reject) {
      axios
        .post(
          getAjaxUrl("/category/children"),
          {
            parent_id
          },
          { withCredentials: true }
        )
        .then(res => {
          if (res.data.success) {
            resolve(res.data.categories);
          } else {
            reject(res.data.msg);
          }
        })
        .catch(error => {
          reject(error);
        });
    });
  }

手工添加节点

addNode(parent: Category | undefined, data: Category): void {
    if (!parent) {
      if (this.categories) {
        this.categories.push(data);
      }
      return;
    }
    if (!parent.children) {
      parent.children = [];
    }
    const children = ([] as Category[]).concat(parent.children);
    children.push(data);
    this.$refs.tree.updateKeyChildren(parent.id, children);
  }

注意

手工添加节点一定要设置node-key,这是updateKeyChildren必须的。另外，必须创建另外一个数组作为children，不可用复用原来的children数组。否则updateKeyChildren不能刷新这个节点的孩子。