vue+elementui 实现合并多个单元格
要注意的是 合并单元格时 后端返回的数据必须与表格绑定的顺序一致
vue-dom层
<el-table ref="report-table" :data="dataList" border v-loading="dataListLoading"
@selection-change="handleSelectionChange" style="width: 100%;border: 1px solid #c5c5c5"
:cell-style="{borderColor:'#c5c5c5'}" :span-method="objectSpanMethod"
:header-cell-style="{background: '-webkit-linear-gradient(top,hsl(0deg 2% 26% / 15%),#E3EBF1,hsl(0deg 0% 100%),#D3DDE5) no-repeat',borderColor:'#B5B4B3',color:'#606266'}">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="rcCode" show-overflow-tooltip header-align="center" align="center" label="编号">
</el-table-column>
<el-table-column prop="manufactor" header-align="center" align="center" show-overflow-tooltip label="厂家">
</el-table-column>
</el-table>
// data
data() {
return {
dataList: [], //请求数据绑定element-ui的表格
spanArr: [], // 第一列的数据
spanArr1: [], // 第二列数据
pos: 0, // 第一列数据
pos1: 0, //第二列数据
};
方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 判断每一列 合并数据
if (columnIndex == 0) {
let _row = this.spanArr[rowIndex];
let _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
if (columnIndex == 1) {
let _row = this.spanArr1[rowIndex];
let _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
getSpanArr(data) {
// 第一列处理
console.log(data);
this.spanArr = [];
if (data === null) {
return;
}
for (let i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
//第一次走else的时候:i已经是1了
// 判断当前元素与上一个元素是否相同
if (data[i].rcCode === data[i - 1].rcCode) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
// 第二列处理
this.spanArr1 = [];
if (data === null) {
return;
}
for (let i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr1.push(1);
this.pos1 = 0;
} else {
//第一次走else的时候:i已经是1了
// 判断当前元素与上一个元素是否相同
if (data[i].rcCode === data[i - 1].rcCode && data[i].manufactor === data[i - 1].manufactor) {
this.spanArr1[this.pos1] += 1;
this.spanArr1.push(0);
} else {
this.spanArr1.push(1);
this.pos1 = i;
}
}
}
console.log(this.spanArr1,'this.spanArr');
},
// 第三列以此类推
在请求完dataList数据之后执行方法
this.getSpanArr(this.dataList);
最后效果图
用每一列数据的每一行做对比 相同的合并 具体看需求 后端返回数据为平铺数组 找相同的元素合并
-编号
除了编号 其他都是在相同编号下进行合并
可能很拙略很冗长 记录一下