一、表头合并列
这是官网合并列效果,可是,并不适用于只有一级表头的,官方文档并未发现直接实现属性
一级表头合并实现方式:给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>
js
discountHeaderStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 1) { //隐藏另外领两个头部单元格
return { display: 'none' }
}
},
下面是效果
注意
这样会有个问题,本来最后两列是加了 fixed=“right” 属性固定在右侧的,当合并头部时,这个属性不起作用,如果加在父级el-table-column上,最后两列直接乱掉……不知道怎么兼容,所以我把定位给去了
二、表内容合并行
<el-table
:data="tableData"
border
fit
:span-method="objectSpanMethod"
style="width: 100%"
>...</el-table>
//加载列表
initList() {
//此处axios请求数据省略
this.tableData = data.list
this.getSpanArr(this.tableData)
}
//合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0||columnIndex===14) { // 对第一列进行合并
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
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] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.position = index
}
}
})
},
效果如下