eltree ref什么时候有_vue中使用element组件库tree实现动态增加节点

最近项目遇到一个树形结构数据业务场景如下：

前期版本中仅需要展示分类树(由专门单独的接口返回)，具体分类下数据由单独的表格展示(有另外一个接口返回，可根据分类id筛选)，随着需求迭代设计，需要在分类树中展示数据，对此，在不修改分类接口的前提下，新增接口获取数据，动态添加到分类树节点上。为此利用element->tree组件节点API实现。

//template

ref="tree"

:data="treeData"

node-key="id"

default-expand-all

check-strictly

@node-click="nodeClick"

@check="check"

:expand-on-click-node="true">

{{ data.name }}

定义在点击节点时加载子节点数据，利用updateKeyChildren：

export default {

name:'component',

data(){

return {

treeData:[{

"children": [

{

"children": [

{

"children": [

{

"children": [],

"name": "第四层",

"id": 5

},

{

"children": [],

"name": "添加层级",

"id": 51

},

{

"children": [],

"name": "ss",

"id": 75

}

],

"name": "第三层",

"id": 3

}

],

"name": "第二层",

"id": 2

}

],

"name": "系统",

"id": 1

}]

}

},

methods:{

//加载标签数据

async nodeClick(data,node){

if (node.level == 4 && !data.children) {

let { result } = await this.Api.getData();

if (result && result.length > 0) {

this.$nextTick(() => {

this.$refs['tree'].updateKeyChildren(data.id,result);

})

}

}

}

}

}

根据节点key设置选中状态：setCheckedKeys

根据节点nodes设置选中状态：setCheckedNodes

获取树选中状态节点数据数组：getCheckedNodes

获取树选中状态节点key值数组：getCheckedKeys