基于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();
             },
         })