vue+element table 合并列
<el-table
ref="multipleTable"
v-loading="listLoading"
:data="tableData"
tooltip-effect="dark"
:header-cell-style="{background:'#eff3f6'}"
:height="system.innerHeight-130-searchBoxHeight-75"
:span-method="arraySpanMethod"
style="width: 100%"
border
>
needMergeAttr为需要合并项的列
this.tableData为获取到后台返回的数据
arraySpanMethod方法
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//这里不能直接循环needMergeAttr
if (column.property === 'resourcetype') {
return this.mergeAction('resourcetype', rowIndex, column);
}
if (column.property === 'serviceattr') {
return this.mergeAction('serviceattr', rowIndex, column);
}
if (column.property === 'servicetype') {
return this.mergeAction('servicetype', rowIndex, column);
}
if (column.property === 'majorcategory') {
return this.mergeAction('majorcategory', rowIndex, column);
}
if (column.property === 'majorsubcategory') {
return this.mergeAction('majorsubcategory', rowIndex, column);
}
if (column.property === 'remark') {
return this.mergeAction('remark', rowIndex, column);
}
},
mergeAction(val, rowIndex, colData) {
const _row = this.rowMergeArrs[val].rowArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return [_row, _col];
},
rowMergeHandle(arr, data) {
if (!Array.isArray(arr) && !arr.length) return false;
if (!Array.isArray(data) && !data.length) return false;
const needMerge = {};
arr.forEach(i => {
needMerge[i] = {
rowArr: [],
rowMergeNum: 0
};
data.forEach((item, index) => {
if (index === 0) {
needMerge[i].rowArr.push(1);
needMerge[i].rowMergeNum = 0;
} else {
if (item[i] === data[index - 1][i]) {
needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
needMerge[i].rowArr.push(0);
} else {
needMerge[i].rowArr.push(1);
needMerge[i].rowMergeNum = index;
}
}
});
});
return needMerge;
}
效果图