<template>
<div>
<p>表格数据</p>
<button @click="btn1">加1</button>
<button @click="btn2">加2</button>
<el-table
:data="tableData"
border
height="400px"
max-height="400px"
size="small"
row-class-name="row"
cell-class-name="column"
:highlight-current-row="true"
:header-cell-style="headerStyle"
fit
>
<el-table-column
v-for="(item, index) in tableLabel"
:key="index"
:prop="item.prop"
:min-width="item.width"
:label="item.label"
show-overflow-tooltip
align="center"
>
<el-table-column
v-for="(itemchildren, indexchildren) in item.list"
:key="indexchildren"
:prop="itemchildren.prop"
:min-width="itemchildren.width"
:label="itemchildren.label"
show-overflow-tooltip
align="center"
>
<el-table-column
v-for="(itemchildrenson, indexchildrenson) in itemchildren.list"
:key="indexchildrenson"
:prop="itemchildrenson.prop"
:min-width="itemchildrenson.width"
:label="itemchildrenson.label"
show-overflow-tooltip
align="center"
>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableLabel: [
{
label: "钢铁料",
list: [
{
label: "铁水",
list: [
{ label: "业务1", prop: "a1" },
{ label: "业务3", prop: "a3" },
],
},
{
label: "铁块",
list: [
{ label: "业务1", prop: "a1" },
{ label: "业务3", prop: "a3" },
],
},
{
label: "废钢",
list: [
{ label: "业务1", prop: "a1" },
{ label: "业务3", prop: "a3" },
],
},
{
label: "矿石",
list: [
{ label: "业务1", prop: "a1" },
{ label: "业务3", prop: "a3" },
],
},
],
},
{
label: "销售量1",
list: [
{
label: "内容1",
list: [{ label: "内容1", prop: "a4" }],
},
{
label: "内容1",
list: [{ label: "内容1", prop: "a4" }],
},
],
},
{
label: "销售量2",
list: [
{
label: "内容1",
list: [{ label: "内容1", prop: "a4" }],
},
{
label: "内容1",
list: [{ label: "内容1", prop: "a4" }],
},
],
},
],
tableData: [
{ a1: 1, a2: 5, a3: 15, a4: 1, a6: 7 },
{ a1: 1, a2: 5, a3: 15, a4: 1, a6: 7 },
{ a1: 1, a2: 5, a3: 15, a4: 1, a6: 7 },
],
};
},
methods: {
btn1() {
this.tableLabel.push({
label: "销售量2",
list: [
{
label: "内容1",
list: [{ label: "内容1", prop: "a4" }],
},
],
});
},
btn2() {
this.tableLabel.push({
label: "销售量2",
list: [
{
label: "内容1",
list: [{ label: "内容1", prop: "a4" }],
},
{
label: "内容1",
list: [{ label: "内容1", prop: "a4" }],
},
],
});
},
headerStyle({ row, rowIndex }) {
// console.log(row, column, rowIndex, columnIndex);
console.log(row, rowIndex);
if (rowIndex == 0) {
for (let i = 0; i < this.tableLabel.length; i++) {
row[i].rowSpan = 2;
}
}
if (rowIndex == 1) {
let numyy = 0; // 记录第二排长度
for (let i = 0; i < this.tableLabel.length; i++) {
const newArr = this.tableLabel[i].list;
numyy = numyy + newArr.length;
if (newArr.length > 1) {
if (newArr.length !== 4) {
row[numyy - 2].rowSpan = 0;
row[numyy - 1].rowSpan = 0;
}
} else {
row[numyy - 1].rowSpan = 0;
}
}
}
},
},
};
</script>
<style>
</style>
合并表头有4个二级标题的情况
最新推荐文章于 2024-03-01 10:39:57 发布