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