在vue3上使用el-table组件自定义循环表头列；
<el-table :data="list" v-loading="loading" border>
<!-- @selection-change="handleSelectionChange" -->
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="编号" align="center" prop="rowIndex" width="70"/>
<el-table-column label="单位" align="center" prop="userName" :show-overflow-tooltip="true"/>
<el-table-column label="车队" align="center" prop="userName" :show-overflow-tooltip="true"/>
<el-table-column label="统计时间段" align="center" prop="userName" :show-overflow-tooltip="true"/>
<el-table-column label="司机名称" align="center" prop="userName" :show-overflow-tooltip="true"/>
<el-table-column label="车牌号" align="center" prop="userName" :show-overflow-tooltip="true"/>
<el-table-column label="司机资格证号" align="center" prop="userName" :show-overflow-tooltip="true"/>
<!-- 自定义动态表格 取第一个数据循环自定义表头数据-->
<el-table-column
v-for="(item,index) in list[0].tel"
:key="index"
:label="item.name"
align="center"
show-overflow-tooltip
>
<el-table-column label="总数" align="center" :show-overflow-tooltip="true"><!-- 自定义第二层表头-->
<template #default="scope">
<span>{{ scope.row.tel[index].totle }}</span><!-- 自定义第二层表格数据-->
</template>
</el-table-column>
<el-table-column label="有效" align="center" :show-overflow-tooltip="true"><!-- 自定义第二层表头-->
<template #default="scope">
<span>{{ scope.row.tel[index].xtotle }}</span><!-- 自定义第二层表格数据-->
</template>
</el-table-column>
</el-table-column>
<el-table-column label="异常次数总计" align="center" >
<el-table-column label="总数" align="center" prop="aebsMaxTime" :show-overflow-tooltip="true"/>
<el-table-column label="有效" align="center" prop="aebsMaxCount" :show-overflow-tooltip="true"/>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
<script setup >
// 遮罩层
const loading = ref(true)
// 总条数
const total = ref(0)
// 表格数据
const list = ref([{rowIndex:1,userName:"测试",tel:[{name:"疲劳驾驶12",totle:100,xtotle:90},{name:"区域超速",totle:120,xtotle:80},{name:"区域超速3",totle:120,xtotle:80}]},
{rowIndex:2,userName:"测试",tel:[{name:"疲劳驾驶12",totle:90,xtotle:91},{name:"区域超速",totle:85,xtotle:86},{name:"区域超速3",totle:120,xtotle:80}]},
{rowIndex:3,userName:"测试",tel:[{name:"疲劳驾驶12",totle:3,xtotle:31},{name:"区域超速",totle:3.1,xtotle:3.2},{name:"区域超速3",totle:120,xtotle:80}]},
{rowIndex:3,userName:"测试",tel:[{name:"疲劳驾驶12",totle:4,xtotle:41},{name:"区域超速",totle:4.1,xtotle:4.2},{name:"区域超速3",totle:120,xtotle:80}]}])
const state = reactive({
// 表单参数
form: {},
queryParams: {
pageNum: 1,
pageSize: 20,
userName: undefined,
},
})
const { form,queryParams} = toRefs(state)
/** 查询分页列表 */
function getList() {
loading.value = true
// getinfolist(queryParams.value).then((response) => {
// loading.value = false
// if (response.code == 200) {
// list.value = response.data.result
// total.value = response.data.totalNum
// } else {
// total.value = 0
// list.value = []
// }
// })
}
</script>
具体效果显示：
