Vue-Element [table] [dynamically add multi-level headers and data binding]

Renderings:

---

code:

<template>
  <el-table v-loading="loading" :data="tableData" highlight-current-row size="small" style="width: 100%;">
    <el-table-column :label="$t('table.id')" type="index" min-width="5%" align="center" v-if="false"/>
    <el-table-column width="120px" prop="subTime" label="统计日期" align="center"/>

    <el-table-column v-for="item in columnFirstOptions" :label="item.value" :key="item.id" :property="item.id"
                     align="center" width="65">
      <el-table-column min-width="10%" v-for="ccitem in columnSecondOptions[item.id]" :label="ccitem.value"
                       :key="ccitem.id" :property="ccitem.id" align="center">
        <template slot-scope="scope">
          <span>{
   
   { scope.row["data"][item.id][scope.column.property] }}</span>
        </template>
      </el-table-column>

    </el-table-column>

  </el-table>
  <!--分页组件-->
  <el-pagination
    background
    @size-change="sizeChange"
    @current-change="pageChange"
    :current-page="query.pageNum"
    :page-sizes="[10, 20, 30, 40, 50]"
    :page-size="query.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="query.total">
  </el-pagination>
</template>

<script>
    import API from '@/api/myApi'

    export default {
        name: "DynamicTable",
        data() {
            return {
                tempData: null,
                loading: false,
                //动表列一级头
                columnFirstOptions: [
                    {id: '001', value: "测试001"},
                    {id: '002', value: "测试002"}
                ],
                //动表列二级头
                columnSecondOptions: {
                    "001": [
                        {id: 'callCnt1', value: "调用次数"},
                        {id: 'backResCnt1', value: "返回次数"},
                        {id: 'billCnt1', value: "计费次数"}

                    ],
                    "002": [
                        {id: 'callCnt2', value: "调用次数"},
                        {id: 'backResCnt2', value: "返回次数"},
                        {id: 'billCnt2', value: "计费次数"}

                    ]
                },
                //表格数据
                tableData: [
                    {
                        "subTime": "2019-09-01",
                        "data": {
                            "001": {
                                "callCnt1": 10,
                                "backResCnt1": 10,
                                "billCnt1": 10
                            },
                            "002": {
                                "callCnt2": 10,
                                "backResCnt2": 10,
                                "billCnt2": 10
                            }
                        }

                    },
                    {
                        "subTime": "2019-09-02",
                        "data": {
                            "001": {
                                "callCnt1": 10,
                                "backResCnt1": 10,
                                "billCnt1": 10
                            },
                            "002": {
                                "callCnt2": 10,
                                "backResCnt2": 10,
                                "billCnt2": 10
                            }
                        }

                    }

                ],
                //查询参数
                "query":{
                    "pageNum":1,
                    "pageSize":10,
                    "total":20
                }
            }
        },
        created() {

        },
        computed: {},
        watch: {
            //监听查询,query.size一旦发生变化，下面的函数就会执行
            'query.size': debounce(function () {
                this.init();
            }, 500),
        },
        methods: {

            init() {
                console.log("初始化中。。");
                this.getData();
            },
            //请求API返回数据
            getData() {
                this.loading = true
                API.getData(this.query).then(res => {

                    //设置动态多级表头参数
                    this.columnFirstOptions = res.result.list[0].columnFirstOptions
                    this.columnSecondOptions = res.result.list[0].columnSecondOptions

                    this.tableData = res.result.list
                    this.loading = false
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped>

</style>