element-ui 表格实现相同行单元格合并:
<template>
<el-table
ref="multipleTable"
:data="dataFilter(tableData)"
tooltip-effect="dark"
style="width: 100%; margin-top: 15px"
border
:span-method="arraySpanMethod"
>
<el-table-column
prop="id"
label="ID"
align="center"
></el-table-column>
<el-table-column
prop="num"
label="编号"
align="center"
></el-table-column>
<el-table-column
prop="type"
label="类型"
width="150"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="名称"
align="center"
width="230"
></el-table-column>
</el-table>
</template>
<script>
methods: {
mergeRowMethod({ row, column, rowIndex, columnIndex }) {
// 合并行 产品名字相同合并、我是合并第三列,所以合判断columnIndex是否等于2
if (columnIndex === 2) {
if (rowIndex === 0 || row.type != this.tableData[rowIndex-1].type) {
let rowspan = 0;
this.dataFilter(this.tableData).forEach( element => {
if (element.type === row.type) {
rowspan ++;
}
});
return [rowspan, 1];
}else {
return [0, 0];
}
}
},
}
</script>