动态生成表格标题及内容

1.路由配置：config>index.js

// 路由配置文件
let routeConfig = [{
    path: '/',
    component: () => import('@/layout'),
    children: [{
        path: '',
        redirect: '/index'
    }, {
        // 表单1--根据里面的表名获取表单2的name属性作为表格标题，根据表名展示表单3中的表格内容
        path: '/index',
        component: () => import(  'router/index')
    },
    {
        //展示对应表名里面的动态表格标题及表格内容
        path: '/table-data',
        name:'table-data',
        component: () => import(  'router/table-data')
    },
    {
        path: '/404',
        component: () => import( 'router/404')
    }]
}];
export default routeConfig

2.表单1--数据展示并通过路由传参（表名）：index>api.js

export default {
    getTableData(options) {
        return new Promise( resolve => {
            Request.get({
                url: `/common/tables`,
            }).then( rsp => {
                resolve( rsp );
            });
        });
    }
}

index>index.vue

<template>
    <div class="content">
        <div class="table-wrap">
            <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)">
                <el-table-column type="index" :index="typeIndex" label=" 序号"></el-table-column>
                <el-table-column prop="zipRatio" label=" 压缩比例"></el-table-column>
                <el-table-column prop="zipDataSize" label=" 压缩大小"></el-table-column>
                <el-table-column prop="dataSize" label="数据大小"></el-table-column>
                <el-table-column prop="rows" label=" 行数"></el-table-column>
                <el-table-column prop="tableName" label="表名"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="block">
            <el-pagination align="right" @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[10,15,20]" 
            :page-size="pagesize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="tableData.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import Api from './api';
export default {
    components: {
    //    TablePagination,
    },
    data() {
        return {
            currentPage: 1,
            pagesize: 15,
            total: 0,
            tableData: []
        }
    },
    methods: {
        typeIndex(index) {
            let vm = this; //处理分页数据的 index
            return (vm.currentPage - 1) * vm.pagesize + index + 1;
         },
        handleSizeChange(val) {
            this.currentPage=1;
            this.pagesize = val;
        },
         handleCurrentChange(val) {
            this.currentPage = val;
        },
        async loadData() {
            // 加载表格分数
            let resData = await Api.getTableData();
            this.tableData=resData;
        },
        handleClick(item) {
            const tableName=item.tableName;
            const rows=item.rows;
            const currentPage=1;
            //路由传参
            this.$router.push({ 
                path: `table-data`,
                query:{
                    tableName:tableName,rows:rows,currentPage:currentPage
                }
            });
            console.log(rows,tableName,currentPage);
        },
    },
    
    mounted() {
        this.loadData();
    }
}
</script>

3.表单2--点击表单1每行查看按钮可以根据表名查看对应的表单2内容（表单标题与表单内容是从2个接口动态获取的）table-data>api.js

export default {
    getTableData(options) {
        return new Promise( resolve => {
            Request.get({
                url: `/common/${options}/columns`,
            }).then( rsp => {
                resolve( rsp );
            });
        });
    },
    getData(option1,option2,option3) {
        return new Promise( resolve => {
            Request.get({
                url: `/common/${option1}/${option2}/${option3}`,
            }).then( rsp => {
                resolve( rsp );
            });
        });
    }
}

table-data>index.js

<template>
        <div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="50"/>
            <el-table-column v-for="(item,index) in tableHead" :key="index" :label="item" :prop="item"></el-table-column>
        </el-table>
    </div>
</template>

<script>
import Api from './api';
export default {
    components: {
    },
    data() {
        return {
            tableData: [],
            tableHead:[],
            tableName:'',
            pageSize:'',
            currentPage:''
        }
    },
    methods: {
        async loadData() {
            this.tableName = this.$route.query.tableName;
            this.pageSize = this.$route.query.rows;
            this.currentPage=this.$route.query.currentPage;
            console.log(this.tableName,this.pageSize,this.currentPage);
            // 加载表格分数
            let res = await Api.getTableData(this.tableName);
            let resData=res.data;
            //获取表格标题数据
            var name=[]
            for(let key of resData){
                name.push(key.name)
            }
            this.tableHead=name
            if(this.pageSize>999){
                this.pageSize=999
            }
            //获取表格内容数据
            this.tableData = await Api.getData(this.tableName,this.currentPage,this.pageSize);
            this.tableData=this.tableData.data;
        },
    },
    mounted() {
        this.loadData();
    }
}
</script>