tableColumn: [
{
id: 2,
name: "一级表头",
prop: "date",
type: "",
},
{
id: 3,
name: "一级表头",
prop: "",
type: "",
children: [
{
id: 31,
name: "二级表头",
prop: "getInpop",
type: "",
},
],
},
{
id: 4,
name: "一级表头",
prop: "",
children: [
{
id: 41,
name: "二级表头",
prop: "getInpop",
type: "",
},
],
},
],
表头结构前后端都可以定义,如果你想完全前后端分离,为了后期方便,那么表头最好是由后端定义
定义好表头后,开始循环体现
<template v-for="(item, index) in tableColumn">
<!-- 一级表头 -->
<el-table-column
v-if="item.children"
width="180"
align="center"
:index="item.id"
:key="index"
:prop="item.prop"
:label="item.name"
>
<!-- 二级表头 -->
<template v-for="(item_child, index1) in item.children">
<el-table-column
v-if="item_child.children"
:index="item_child.id"
:key="index1"
></el-table-column>
<el-table-column
v-else
:label="item_child.name"
:index="item_child.id"
:key="index1"
align="center"
:type="item_child.type"
:prop="item_child.prop"
></el-table-column>
</template>
</el-table-column>
<el-table-column
v-else
:label="item.name"
:index="item.id"
:key="index"
align="center"
:type="item.type"
:prop="item.prop"
>
</el-table-column>
</template>
原文链接:https://blog.csdn.net/qq_36539696/article/details/122243855