需求:按照下图完成单元格合并,数据展示
可以看到科室列是需要合并的 并加背景色展示;具体代码如下:
<el-tableref="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"stripeborder: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 - 1if (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 {}}