vue中使用element组件库tree实现动态增加节点

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

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

//template

<template>
    <el-tree
        ref="tree"
        :data="treeData"
        node-key="id"
        default-expand-all
        check-strictly
        @node-click="nodeClick"
        @check="check"
        :expand-on-click-node="true">
        <span slot-scope="{ data }">
            <span class="pr10">{{ data.name }}</span>
        </span>
    </el-tree>
</template>

　　定义在点击节点时加载子节点数据，利用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