Element table各种合并单元格

一、表头合并列

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

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

<el-table :data="tableData" border fit :header-cell-style="discountHeaderStyle"> 
	"操作" align="center">
	   "center" width="160" fixed="right">
	        
	    
	    "center" width="110" fixed="right">
	        
	      
	

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
            }
        }
    })
},

效果如下