效果图:
代码:
<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>