vue+element表格实现多层数据的嵌套

在网上找了半天vue表格实现多层数据的嵌套，现在来记录一下，希望可以帮助到你们，看的Element的官网：添加链接描述

这是已做完的效果

后台接口返回的数据是嵌套多了一层，直接上图，后台返回的数据结构

本来想着让后端在list里面多返回一个id,就不用这么麻烦要循环嵌套，后端说没有id,让前端直接循环，不用多说直接上代码

template

      <el-table :data="tableData" style="width: 100%;" row-key="rowType" default-expand-all
            @selection-change="handleSelectionChange" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <!-- 序号 -->
            <el-table-column type="" width="60" label="序号" align="center" show-overflow-tooltip
                prop="index"></el-table-column>

            <el-table-column show-overflow-tooltip width="300" label=''>
                <template slot-scope="scope">
                    <div style="display:inline-block;">
                        <span>{{ scope.row.title }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="费用类别" prop="costType">
            </el-table-column>
            <el-table-column label="期初金额" prop="openAmount">
            </el-table-column>
            <el-table-column label="本月金额" prop="monthAmount">
            </el-table-column>
            <el-table-column label="累计金额" prop="accumulateAmount">
            </el-table-column>
            <el-table-column label="备注" prop="remarks">
            </el-table-column>
        </el-table>

methods

 for (let i = 0; i < res.data.length; i++) {
                    this.tableData.push({
                        'rowType': i,
                        'title': res.data[i].name,
                        'children': res.data[i].list
                    })
                }
        // 树形表格序号
                this.tableData.forEach((item, index) => {
                    if (item.children && item.children.length) {
                        item.children.forEach((items, i) => {
                            items.index = (this.pageNum - 1) * this.pageSize + (i + 1);
                        });
                        item.index = this.changeNumToHan(index + 1);
                    }
                    item.index = this.changeNumToHan(index + 1);
                });