Element table各种合并单元格

article/2025/9/12 11:27:29

一、表头合并列

这是官网合并列效果，可是，并不适用于只有一级表头的，官方文档并未发现直接实现属性
在这里插入图片描述

一级表头合并实现方式：给table加 header-cell-style，代码如下

<el-table :data="tableData" border fit :header-cell-style="discountHeaderStyle"> <el-table-column label="操作" align="center"><el-table-column align="center" width="160" fixed="right"><template slot-scope="scope"><div>               <el-button size="mini" type="success" plain>查看</el-button><el-button type="primary" size="mini" plain>回复</el-button></div></template></el-table-column><el-table-column align="center" width="110" fixed="right"><template slot-scope="scope"><div><el-button type="warning" size="mini" plain>取消订单</el-button></div></template></el-table-column>  </el-table-column>
</el-table>

discountHeaderStyle({ row, column, rowIndex, columnIndex }) {if (rowIndex === 1) {      //隐藏另外领两个头部单元格                       return { display: 'none' }}
},

下面是效果
在这里插入图片描述

注意

这样会有个问题，本来最后两列是加了 fixed=“right” 属性固定在右侧的，当合并头部时，这个属性不起作用，如果加在父级el-table-column上，最后两列直接乱掉……不知道怎么兼容，所以我把定位给去了

二、表内容合并行

<el-table:data="tableData"borderfit:span-method="objectSpanMethod"style="width: 100%"
>...</el-table>

//加载列表
initList() {//此处axios请求数据省略this.tableData = data.listthis.getSpanArr(this.tableData)
}
//合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0||columnIndex===14) { // 对第一列进行合并const _row = this.spanArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}
},
//筛选需要合并单元格的数据
getSpanArr(data) {this.spanArr = [] // 避免表格错乱！data.forEach((item, index) => {if (index === 0) {this.spanArr.push(1)this.position = 0} else {if (data[index].orderId === data[index - 1].orderId) { // 这里是要合并行this.spanArr[this.position] += 1this.spanArr.push(0)} else {this.spanArr.push(1)this.position = index}}})
},