Vue：eliment-ui el-tree动态加载更新

最近在数据源管理功能，需要以树的形式异步展现：

 

 

根节点可以新增目录。

目录节点可以新增目录，编辑目录，新增主数据。

主数据节点无操作按钮。

找到element-ui的官方文档，el-tree。（地址：http://element-cn.eleme.io/#/zh-CN/component/tree ）

    结合自定义节点内容：

 

1.节点后添加操作按钮

renderContent(h, { node, data }) {
      return (
        
          {node.label}
          
             this.editBizFolder(node, "add", resolve)}
            />
             this.editBizFolder(node, "edit")}
            />
             this.addBizObject(node)}
            />
          
        
      );
    }

　　

2. 默认根节点是展开的

 node-key="id"
        :default-expanded-keys="['1']"
        @node-click="nodeClick"
      >

标红处为关键代码

3. 动态添加,更新后刷新节点

append方法肯定是不行的，添加完成后，需要重新拉取查询子节点的接口,这个方法放弃了，

缓存resolve方法，这个方法也是不可取的，this的指向会发生问题(展开节点a再点击b节点的新增目录)，这个方法也必须得放弃。

element-ui提供了 doCreateChildren(children, defaultProps)方法创建子节点

children就是你需要动态添加的数据。

reloadNode(node) {
      DataSourceService.getDataTree(node.data.objectId).then(
        res => {
          if (res.data && res.data.length > 0) {
            let rootChildren = [];
            res.data.forEach(element => {
              rootChildren.push({
                name: element.Text,
                leaf: element.IsLeaf,
                objectId: element.ObjectID,
                code: element.Code,
                nodeType: element.NodeType,
                sortKey: element.SortKey,
                children: []
              });
            });
            node.childNodes = [];　　//清空节点
            node.doCreateChildren(rootChildren);　　//更新节点
          }
        }
      )

 

4.最终代码

　　

另el-tree的一些基本方法...

（可参考element-ui源码node_modules\element-ui\packages\tree\src\model\node.js 和tree-store.js）

1.设置展开和收缩

 if (!node.expanded) {
     node.expand();
 } else {
     node.collapse();
 }

2.获取父节点

node.parent