【js小技】el-table树形结构

el-table本身有错落有致的树形结构，只有数据格式完美，一般来说整上就能用👍！实现的效果图如下：

可惜的是，后台按顺序平等地返回了所有数据，数组每一项里面的对象有属性表达层级，但是却没有表达直接对应的父子级关系(╯▔皿▔)╯，事情变得棘手起来，需要花费功夫来整理一下数据❗（没错，最后在经验人士的帮助下浅用了递归，特来记录一下✌

😡后台返回的数据包如下：

（注：只有idepth来表达层级，缺少直接对应的父子级关系❗❗具体的父子层级关系可以结合效果图理解一下）

渲染代码如下：

<el-table 
    :data="tableDataMap.children"
    row-key="budget_code"
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    height="750"
>
    <el-table-column
        prop="budget_code"
        label="编码"
        width="180"
        align="left">
    </el-table-column>
    <el-table-column
        prop="budget_name"
        label="名称"
        align="center">
    </el-table-column>
    <el-table-column
        prop="adj_val"
        label="预计数"
        width="140"
        align="right"> 
    </el-table-column>
    <el-table-column
        prop="balance_val"
        label="调整数"
        width="140"
        align="right">
    </el-table-column>
</el-table> 

逻辑代码如下：

data() {
    return {
        tableDataMap:{
            children:[],
        },
    }
},

// 表格数据
accPrjbgts(callback) {
    axios({
        method: 'post', url: '/',
        data: { ajax: true, act: '', },
    }).then(response => {
        let resp = response.data;
        if (resp.success) {
            this.prjbgts = resp.objectMap.prjbgts || [];    // 后台返回数据
            this.tableDataMap = {};
            this.prjbgts.map(bgt=>{
                if(bgt._prop.idepth === '1'){               // 判断最高层级
                    this.getTreeTable(this.tableDataMap, bgt, this.prjbgts);
                }
            });
            callback && callback();
        } else {
           // ...
        }
    }).catch(function (error) {
        // ...
    }).finally(()=>{});
},

// 整理成树形结构
getTreeTable(tableDataMap, obj, list) {
    let children = obj.children || [];              // 初始化
    obj.children = children;                        // 指向同一内存地址
    for (let i = 0; i < list.length; i++) {
        let curObj = list[i];
        // 根据层级和编码判断父子关系
        if (curObj._prop.idepth * 1 === obj._prop.idepth * 1 + 1 && curObj.budget_code.includes(obj.budget_code)) {     
            children.push(curObj);
            // 调用递归
            this.getTreeTable(tableDataMap, curObj, list);     
        }
    }
    // 调用递归时可能导致其他层级进入，需要判断一下
    if (obj._prop.idepth === "1") {    
        let tableDataMapChildren = tableDataMap.children || [];
        tableDataMapChildren.push(obj);
        tableDataMap.children = tableDataMapChildren;
    }
},

注：全局变量可直接使用，不必利用传参，方法有优化空间❗

 至此！递归的树形大功告成😉