在使用ElementPlus的table组件的时候,我们通常会处理合计,当遇到合计行需要合并列的时候,可以这样做。
核心就是获取标签,对标签的CSS样式进行设置,以达到合并单元格的效果。
Template
<el-tablemax-height="calc(100vh - 240px)"ref="tableRef"border:data="tableData"show-summary:span-method="spanMethod":header-cell-style="{ color: '#333', backgroundColor: '#f5f7fa', textAlign: 'center' }"style="width: 100%"align="center">
Script
import { ref, nextTick } from "vue";
const table = ref();
const spanMethod = ({ row, column, rowIndex, columnIndex }: any) => {nextTick(() => {if (tableRef.value.$el) {let current = tableRef.value.$el.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer");let cell = current.rows[0].cells;cell[0].style.textAlign = "center"; // 合计行第一列字段居中显示。cell[1].style.display = "none";cell[0].colSpan = "2"; // 合并单元格}});
};