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