有个需要是这样的，表格第一列须要合并行，后边的数据是通过接口获取，效果图如下：
首先，列中的工夫是前端生成的，尖峰、顶峰、低谷是每行数据都会有的，能够写死，具体代码如下：
// 表格：
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
size="mini"
>
<el-table-column label prop="company">
<template slot-scope="scope">{{scope.row.company}}</template>
</el-table-column>
<el-table-column label="工夫" prop="symbolType" width="120px">
<template slot-scope="scope">{{scope.row.symbolType}}</template>
</el-table-column>
<el-table-column
v-for="(item, index) in timeData"
:key="index"
:prop="item.label"
:label="item.time"
>
<template slot-scope="scope">{{scope.row[item.label] }}</template>
</el-table-column>
</el-table>// data 数据如下：
data() {
return {companyArr: [],
companyPos: 0,
typeArr: [],
typePos: [],
// 假数据，前期是通过接口获取
tableData: [{company: "xxxx1",type:1,symbolType: "尖峰",m1: "1",m2:"1",m3: "",m4:"",m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},
{company: "xxxx1",type:1,symbolType: "顶峰",m1: "",m2:"1",m3:"1",m4:"",m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},
{company: "xxxx1",type:1,symbolType: "低谷",m1: "",m2:"",m3: "1",m4: "1",m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},
{company: "xxxx2",type:2,symbolType: "尖峰",m1: "",m2:"2",m3:"2",m4:"",m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},
{company: "xxxx2",type:2,symbolType: "顶峰",m1: "",m2:"",m3: "2",m4: "2",m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},
{company: "xxxx2",type:2,symbolType: "低谷",m1: "",m2:"",m3: "",m4:"2",m5:"2",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},
{company: "xxxx3",type:3,symbolType: "尖峰",m1: "",m2:"",m3: "3",m4: "3",m5:"",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},
{company: "xxxx3",type:3,symbolType: "顶峰",m1: "",m2:"",m3: "",m4:"3",m5:"3",m6:"",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},
{company: "xxxx3",type:3,symbolType: "低谷",m1: "",m2:"",m3: "",m4:"",m5:"3",m6: "3",m7:"",m8:"",m9:"","m10":"",m11:"",m12:""},
],
}
}// timeData:
computed: {timeData() {let year = new Date().getFullYear();
let obj = {};
let arr = [];
for (let i = 1; i <= 12; i++) {
obj = {
time: year + "年" + i + "月",
label: "m" + i, // 这块是和后端确认的每个月的字段名
};
arr.push(obj);
}
return arr;
},
},// 对 tableData 数据处理
created() {this.consolidation()
}// methods 中的办法
// 依据 type 计算出要合并的行数
consolidation() {this.companyArr = [];
this.companyPos = 0;
this.typeArr = [];
this.typePos = 0;
for (var i = 0; i < this.tableData.length; i++) {if (i === 0) {
// 第一行必须存在
this.companyArr.push(1);
this.companyPos = 0;
this.typeArr.push(1);
this.typePos = 0;
} else {
// 判断以后元素与上一个元素是否雷同 this.companyPos 是 companyArr 内容的序号
if (this.tableData[i].type === this.tableData[i - 1].type) {this.companyArr[this.companyPos] += 1;
this.companyArr.push(0);
} else {this.companyArr.push(1);
this.companyPos = i;
}
if (this.tableData[i].symbolType === this.tableData[i - 1].symbolType &&
this.tableData[i].type === this.tableData[i - 1].type
) {this.typeArr[this.typePos] += 1;
this.typeArr.push(0);
} else {this.typeArr.push(1);
this.typePos = i;
}
}
}
},// 合并行办法
arraySpanMethod({row, column, rowIndex, columnIndex}) {if (columnIndex === 0) {const _row_1 = this.companyArr[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0; // 如果被合并了_row= 0 则它这个列须要勾销
return {
rowspan: _row_1,
colspan: _col_1,
};
} else if (columnIndex === 1) {const _row_2 = this.typeArr[rowIndex];
const _col_2 = _row_2 > 0 ? 1 : 0;
return {
rowspan: _row_2,
colspan: _col_2,
};
}
},完满解决，前期 table 数据从接口获取，改装成 tableData 中的数据结构就能够间接应用了。