element ui :show-summary=“true“ 属性 指定合并列

element ui :show-summary=“true” 属性 指定合并列

<template>
  <el-table :data="tableData" style="width: 100%" :show-summary="true" :summary-method="calculateSummary">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="score" label="分数"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, score: 80 },
        { name: '李四', age: 22, score: 90 },
        { name: '王五', age: 25, score: 85 }
      ]
    };
  },
  methods: {
    calculateSummary({ columns, data }) {
      const sums = [];
      columns.forEach((column, columnIndex) => {
        if (column.property === 'score') {
          // 跳过计算分数（score）列的合计
          sums[columnIndex] = '';
          return;
        }

        let total = 0;
        data.forEach((item) => {
          total += item[column.property];
        });

        sums[columnIndex] = total;
      });

      return sums;
    }
  }
};
</script>

在上述示例中，我们使用了 Element UI 的 summary-method 方法来自定义合计行的计算逻辑。在 calculateSummary 方法中，我们遍历表格的各列，并根据需要计算每列的合计值。

在示例中，我们通过判断 column.property 是否为 ‘score’，来决定是否跳过分数（score）列的合计计算。如果是分数列，我们将合计值设为 ‘’，表示不计算该列的合计；否则，我们遍历数据并累加该列的值。

请根据您的实际需求进行调整和扩展，以满足不计算某列的合计的要求。