el-table合计行单元格合并、单元格样式修改

在Element UI的el-table组件中，合计行的单元格合并和样式修改可以通过以下方式实现：

1. 使用show-summary属性来显示合计行。
2. 使用span-method属性来合并单元格。
3. 使用summary-method属性来自定义合计行的数据处理。
4. 使用CSS来修改合计行的样式。

以下是一个示例代码：

<template>
  <el-table
    :data="tableData"
    show-summary
    :span-method="mergeSummaryCells"
    style="margin-top: 20px;"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
    <el-table-column
      prop="score"
      label="分数"
      sortable
      align="right"
      :class-name="'custom-summary-class'">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          score: 100
        },
        // ...更多数据
      ]
    };
  },
  methods: {
    mergeSummaryCells({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === this.tableData.length) {
        if (columnIndex === 0) {
          return [1, 2]; // 合并第一列的两个单元格
        } else if (columnIndex === 1) {
          return [0, 0]; // 不显示合并的单元格
        }
      }
    }
  }
};
</script>
 
<style>
/* 修改合计行的样式 */
.custom-summary-class {
  font-weight: bold;
  color: red;
}
</style>

在这个示例中，show-summary属性启用了合计行的显示，span-method属性用于合并合计行第一列的两个单元格，并且通过CSS为合计行的单元格添加了自定义样式。注意，你需要根据实际的数据结构和需求调整span-method方法中的合并逻辑。