1. As in the title, I recently encountered a need to merge cells, because I am using the el-table in Ele.me UI, so I took a look at the example given on its official website. You can use the attribute: span-method to achieve it, but the given The example is to directly fix the number of rows to be merged. In actual projects, we definitely can’t do this. When the data is uncertain, we don’t know which row to merge into. We can just use its value to judge. If it is the same value, just merge this row for him, and it will be fine if not. .
2. Example: If we want to combine the same values in the name column, first add the :span-method attribute to the table, and then write the function. It is the name column, and other columns do not need to be managed.
3. The premise is that the data has been obtained from the background, and tableData already has data.
<el-table :data="tableData" :height="tableHeight" size="mini"
:span-method="genderSpanCity">
<el-table-column prop="categoryName" label="名称" fixed align="left" width="150"
show-overflow-tooltip> </el-table-column>
<el-table-column prop="name" label="地市" fixed align="left" width="150" show-
overflow-tooltip> </el-table-column>
<el-table-column label="历史数据" align="center" >
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
:label="item"
width="150"
align="center">
<template slot-scope="scope" v-if="scope.row.unit">
<el-input v-model="scope.row.vals[index].val" size="mini"
:readonly="scope.row.vals[index].editType === 1" :class="scope.row.vals[index].editType===1?'input1':scope.row.vals[index].editType===2?'class1':'class2'" :value="formatValue(scope.row.vals[index].val,scope.row)" @focus="updateValue(scope.row.vals[index], 'val')" style="width: 100%;">
<template slot="append" v-if="scope.row.unit=='%'||scope.row.unit=='％'"> %
</template>
</el-input>
</template>
</el-table-column>
</el-table-column>
</el-table> genderSpanCity({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 获取当前单元格的值
const currentValue = row[column.property];
// 获取上一行相同列的值
const preRow = this.tableData[rowIndex - 1];
const preValue = preRow ? preRow[column.property] : null;
// 如果当前值和上一行的值相同，则将当前单元格隐藏
if (currentValue === preValue) {
return { rowspan: 0, colspan: 0 };
} else {
// 否则计算当前单元格应该跨越多少行
let rowspan = 1;
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
const nextRow = this.tableData[i];
const nextValue = nextRow[column.property];
if (nextValue === currentValue) {
rowspan++;
} else {
break;
}
}
return { rowspan, colspan: 1 };
}
}
},Popular Science: propertyIt is an attribute of el-table-columnthe component , which is used to specify the name of the data field to be rendered in this column.
final effect:
