一述么、一級表頭蝌数，根據(jù)數(shù)據(jù)動態(tài)生成，二級固定
14961675044310_.pic.jpg
1度秘、結(jié)構(gòu)
<div class="table">
<el-table :data="data.rows" border>
<template v-for="(item, index) in data.headers">
<el-table-column
align="center"
:label="item.mon"
:key="`${index}`"
>
<el-table-column align="center" label="測試數(shù)據(jù)類1">
<template slot="header">
<div>測試數(shù)據(jù)類1</div>
</template>
<template slot-scope="{ row }">
<div>
{{ row[`${item.key_str}`].subtitle_one }}
</div>
</template>
</el-table-column>
<el-table-column align="center" label="測試數(shù)據(jù)類2">
<template slot="header">
<div>測試數(shù)據(jù)類2</div>
</template>
<template slot-scope="{ row }">
<div>
{{ row[`${item.key_str}`].subtitle_two }}
</div>
</template>
</el-table-column>
<el-table-column align="center" label="測試數(shù)據(jù)類3">
<template slot="header">
<div>測試數(shù)據(jù)類3</div>
</template>
<template slot-scope="{ row }">
<div>{{ row[`${item.key_str}`].subtitle_three }}</div>
</template>
</el-table-column>
</el-table-column>
</template>
</el-table>
2顶伞、數(shù)據(jù)
data: {
headers: [
{
mon: "2021年",
key_str: "key1",
},
{
mon: "2022年",
key_str: "key2",
},
{
mon: "2023年",
key_str: "key3",
},
],
rows: [
{
key1: {
subtitle_one: "測試1",
subtitle_two: "測試2",
subtitle_three: "測試3",
},
key2: {
subtitle_one: "測試1",
subtitle_two: "測試2",
subtitle_three: "測試3",
},
key3: {
subtitle_one: "測試1",
subtitle_two: "測試2",
subtitle_three: "測試3",
},
},
{
key1: {
subtitle_one: "測試1",
subtitle_two: "測試2",
subtitle_three: "測試3",
},
key2: {
subtitle_one: "測試1",
subtitle_two: "測試2",
subtitle_three: "測試3",
},
key3: {
subtitle_one: "測試1",
subtitle_two: "測試2",
subtitle_three: "測試3",
},
},
{
key1: {
subtitle_one: "測試1",
subtitle_two: "測試2",
subtitle_three: "測試3",
},
key2: {
subtitle_one: "測試1",
subtitle_two: "測試2",
subtitle_three: "測試3",
},
key3: {
subtitle_one: "測試1",
subtitle_two: "測試2",
subtitle_three: "測試3",
},
},
],
},
一、一級表頭和二級表頭剑梳，根據(jù)數(shù)據(jù)動態(tài)生成
14981675044740_.pic.jpg
1唆貌、結(jié)構(gòu)
<el-table :data="data2.rows" border>
<template v-for="(item, index) in data2.headers">
<el-table-column
align="center"
:label="item.mon"
:key="`${index}`"
>
<el-table-column
align="center"
v-for="(each, ind) in data2.secondaryHeader[
`${item.key_str}`
]"
>
<template slot="header">
<div>{{ each.name }}</div>
</template>
<template slot-scope="{ row }">
<div>{{ row[`${item.key_str}`][each.content] }}</div>
</template>
</el-table-column>
</el-table-column>
</template>
</el-table>
2、數(shù)據(jù)
},
data2: {
headers: [
{
mon: "2021年",
key_str: "key1",
},
{
mon: "2022年",
key_str: "key2",
},
{
mon: "2023年",
key_str: "key3",
},
],
secondaryHeader: {
key1: [
{
name: "二級表頭1",
content: "prop1",
},
{ name: "二級表頭2", content: "prop2" },
],
key2: [
{
name: "二級表頭3",
content: "prop3",
},
{ name: "二級表頭4", content: "prop4" },
],
key3: [
{
name: "二級表頭5",
content: "prop5",
},
{ name: "二級表頭6", content: "prop6" },
],
},
rows: [
{
key1: {
prop1: "111",
prop2: "222",
},
key2: {
prop3: "333",
prop4: "444",
},
key3: {
prop5: "555",
prop6: "666",
},
},
],
},
