使用span-method 进行合并
如果 是首次出现的内容就计算具体有多少行是一样的 然后返回rows行数作为rowspan
如果是与上一行内容相同 就返回0 0消除该单元格
返回rowspan和colspan的对象 意味着合并的行数和列
如果 不参与合并就返回0 0 以免出现多出行或列而导致错位的情况发生
<el-table
:data="tableData"
border
:span-method="objectSpanMethod"
style="width: 100%">
<el-table-column
prop="order"
label="序号"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="name"
:label="'名称'"
align="center"
fixed="left"
width="70">
</el-table-column>
</el-table>
<script>
export default {
name: 'StationsStaTable',
data () {
return {
tableData: [],
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 对第一列 第二列 进行合并
if (columnIndex === 1 || columnIndex === 0) {
// 当 当前行与上一行内容相同时 返回0 0 意味消除
if(rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]){
return {
rowspan: 0,
colspan: 0
};
}else{
let rows = 1;
// 反之 查询相同的内容有多少行 进行合并
for(let i = rowIndex; i < this.tableData.length - 1; i++){
if (row[column.property] === this.tableData[i + 1][column.property]) {
rows++;
}
}
// 返回相同内容的行数
return {
rowspan: rows,
colspan: 1
};
}
}
}
}