页面表格:
<el-table
ref="tableData"
:data="tableData"
:span-method="objectSpanMethod"
border
v-loading="loading"
>
方法:
data() {
return {
loading: false,
tableData: [],
rowList: [],
spanArr: [],
position: 0,
}
},
methods: {
//合并单元格加载数据
rowSpan() {
this.rowList = [];
this.spanArr = [];
this.position = 0;
this.tableData.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1);
this.position = 0;
} else {
//需要根据比较的数据
if (this.tableData[index].auditId === this.tableData[index - 1].auditId) {
this.spanArr[this.position] += 1;
this.spanArr.push(0);
// console.log(this.spanArr, this.position);
} else {
this.spanArr.push(1);
this.position = index;
}
}
});
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//表格合并列数
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
},
数据渲染时调用 rowSpan 方法:
mounted() {
this.search()
},
methods: {
search() {
API.then(res=>{
//表格合并
this.rowSpan()
})
}
},