el-table表格合并某一列
需求:按照下图完成单元格合并,数据展示
可以看到科室列是需要合并的 并加背景色展示;具体代码如下:
<el-table
ref="tableA"
:data="tableDataList"
:header-cell-style="{ backgroundColor: '#f2dcdb', color: '#333', fontSize: '14px', fontWeight: '600', height: '30px' }"
style="width: 100%; margin: 0 auto"
height="100%"
align="center"
row-key="id"
stripe
border
:span-method="spanMethod"
:cell-style="modelCdCellStyle"
>
<template v-for="(item) in viewColumns">
<el-table-column
:key="item.prop"
:fixed="item.fixed"
:prop="item.prop"
:align="item.align"
:label="item.label"
:min-width="item.width"
:show-overflow-tooltip="true"
/>
</template>
</el-table>
viewColumns: [
{ prop: 'system', width: '100', align: 'center', label: '科室', fixed: false },
{ prop: 'systemCode', width: '120', align: 'center', label: '系', fixed: false },
{ prop: 'lastCount', width: '120', align: 'center', label: '上月累计', fixed: false },
{ prop: 'addCount', width: '90', align: 'center', label: '新增', fixed: false },
{ prop: 'modCount', width: '120', align: 'center', label: '修改', fixed: false },
{ prop: 'newCount', width: '120', align: 'center', label: '当月累计', fixed: false }
],
// 合并
spanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 针对第一列
if (rowIndex === 0) {
return {
rowspan: this.tableDataList.length, // 合并从第一行到最后一行
colspan: 1
}
} else {
return {
rowspan: 0, // 后续行不显示内容
colspan: 0
}
}
}
return { rowspan: 1, colspan: 1 } // 其他列不合并
},
//设置颜色的
modelCdCellStyle({ row, column, rowIndex, columnIndex }) {
const lastRowIndex = this.tableDataList.length - 1
if (rowIndex === 0 && column.property == 'system') {
return { backgroundColor: '#c6d9f1', color: '#333', fontSize: '16px', fontWeight: '600' }
} else if (rowIndex === lastRowIndex) {
return { backgroundColor: '#c6d9f1', color: '#333', fontSize: '16px', fontWeight: '600' }
}
return {}
}