如何使用vxe-table-column 进行foreach实现多级表头，代码展示

您可以使用 v-for 指令来遍历多级表头，然后在 vxe-table-column 中使用 header-render 属性来渲染表头。具体实现可以参考以下代码：

<vxe-table :columns="columns" :data="data">
<vxe-table-column v-for="(item, index) in headers" :key="index" :field="item.field" :title="item.title" :colspan="item.colspan" :rowspan="item.rowspan" :header-render="headerRender"></vxe-table-column>
</vxe-table>

<script>
export default {
data() {
return {
headers: [
{
field: 'name',
title: '姓名',
colspan: 2,
rowspan: 2
},
{
field: 'age',
title: '年龄',
colspan: 1,
rowspan: 2
},
{
field: 'address',
title: '地址',
colspan: 2,
rowspan: 1
},
{
field: 'city',
title: '城市',
colspan: 1,
rowspan: 1
},
{
field: 'province',
title: '省份',
colspan: 1,
rowspan: 1
}
],
columns: [
{
field: 'name',
title: '姓名',
width: 100
},
{
field: 'age',
title: '年龄',
width: 100
},
{
field: 'city',
title: '城市',
width: 100
},
{
field: 'province',
title: '省份',
width: 100
},
{
field: 'address',
title: '地址',
width: 200
}
]
}
},
methods: {
headerRender({ column }) {
if (column.colspan > 1 || column.rowspan > 1) {
return {
children: column.title,
attrs: {
colspan: column.colspan,
rowspan: column.rowspan
}
}
}
}
}
}
</script>