基于element-tree-table树型表格点击节点请求数据展开树型表格

效果：

引用CSS、JS：

Vue、element-ui、Axios

treeTable: https://github.com/ProsperLee/element-tree-grid

模拟根据父id请求子数据的JSON：

// data.json
[{
    "id": "a1",
    "name": "一级-1",
    "parentId": "000"
}]

// node.json
[{
    "id": "123",
    "name": "二级-1-1",
    "parentId": "a1"
}, {
    "id": "123",
    "name": "二级-1-2",
    "parentId": "a1"
}, {
    "id": "123",
    "name": "二级-1-3",
    "parentId": "a1"
}]

HTML部分：

    <div id="app">
        <el-table :data="data">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-tree-column :remote="remote" prop="name" parent-key="parentId" label="NAME"></el-table-tree-column>
            <el-table-column prop="name" label="NAME"></el-table-column>
        </el-table>
    </div>

JS部分：// 注意属性表格要显示展开箭头需要加入 child_num 属性

        new Vue({
            el: "#app",
            data: {
                data: []
            },
            methods: {
                remote(row, callback) {
                    var that = this;
                    axios.get("./json/node.json", null)
                        .then(function (response) {
                            row.child_num = response.data.length; // 父级有几个孩子
                            var count = row.depth+1;
                            response.data.forEach((element)=>{ // 循环孩子
                                // element.child_num = 1;
                                element.depth = count; 
                            })
                            var len = response.data.length;
                            for(var i = 0; i < len; i++){
                                if(response.data[i].parentId == row.id){
                                    response.data.unshift(0,0); // 数组前面添加元素
                                    Array.prototype.splice.apply(that.data, response.data); // 指定位置拼接两个数组
                                    break;
                                }
                            }                         
                            callback(that.data.filter(f => f['parentId'] == row['id']))
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                },
                // 获取根节点
                getParentIdData(){
                    var that = this;
                    axios.get("./json/data.json", null)
                        .then(function (response) {
                            response.data.forEach(element => {
                                element.child_num = 1; 
                                element.depth = 0;
                            });
                            that.data = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            },
            created() {
                this.getParentIdData();
            },
        })