html代碼:
<el-table
v-loading="loading"
:data="orgTableData"
:header-cell-style="{'background':'#f5f7fa','color':'#666'}"
stripe
border
>
<el-table-column
prop="number"
label="序號"
width="80"
type="index"
align="center"
/>
<template v-for="item in tableColumns">
<el-table-column
v-if="!item.children"
:key="item.key"
:label="item.name"
:prop="item.key"
show-overflow-tooltip
:min-width="item.minWidth"
:width="item.width"
align="center">
</el-table-column>
<el-table-column
v-else
:key="item.key"
:label="item.name"
align="center">
<el-table-column v-for="s_item in item.children" :key="s_item.key"
:label="s_item.name"
:prop="s_item.key"
align="center">
</el-table-column>
</el-table-column>
</template>
</el-table>
js代碼:
tableColumns: [
{ key: 'visitPersonCnt', name: '訪問(人)', minWidth: 90 },
{ key: 'visitCnt', name: '訪問(次)', minWidth: 90 },
{ key: 'caseSearchCnt', name: '案件搜索(次)', minWidth: 90 },
{ name: '自定義標籤',
children: [
{ key: 'diyRemarkCnt', name: '訪問(次)', minWidth: 90 },
{ key: 'diyRemarkPassCnt', name: '通過(組)', minWidth: 90 },
{ key: 'diyRemarkNotPassCnt', name: '不通過(組)', minWidth: 95 }
] },
{ key: 'allEvidenceCheckCnt', name: '量刑參考訪問(次)', minWidth: 90 }
]
el-table 動態生成表頭 請參考鏈接:el-table 動態生成表頭