Element table各种合并单元格_element table 合并列

一、表头合并列

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

一级表头合并实现方式：给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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

js

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

下面是效果

注意

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

二、表内容合并行

<el-table
   :data="tableData"
   border
   fit
   :span-method="objectSpanMethod"
   style="width: 100%"
>...</el-table>
1
2
3
4
5
6
7

//加载列表
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
            }
        }
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

效果如下