(vue)el-table动态合并最后一行且内容靠左

(vue)el-table动态合并最后一行且内容靠左

---

效果：

---

解决方案:

1.通过 CSS 强制靠左对齐

• 为合并后的单元格添加自定义样式类，并设置 text-align: left：

<template><el-table:data="tableData":span-method="spanMethod":cell-class-name="setCellClassName" <!-- 绑定单元格类名方法 -->><!-- 列定义 --></el-table>
</template><script>
export default {methods: {// 合并单元格方法spanMethod({ rowIndex, columnIndex }) {if (rowIndex === this.tableData.length - 1) {if (columnIndex === 0) {return { rowspan: 1, colspan: 6 }; // 合并所有6列} else {return { rowspan: 0, colspan: 0 };}}},// 动态设置单元格类名setCellClassName({ rowIndex, columnIndex }) {if (rowIndex === this.tableData.length - 1 && columnIndex === 0) {return 'left-align-cell'; // 为合并后的单元格添加类名}return '';}}
};
</script><style>
/* 强制靠左对齐 */
::v-deep .left-align-cell .cell {text-align: left !important;
}
</style>