el-table 自定义合计

el-table组件是Vue.js中非常常用的表格组件，它提供了丰富的功能和配置选项。其中，自定义合计是el-table的一个重要功能之一，可以用于计算表格中某一列的合计值。

要实现el-table的自定义合计，你可以使用el-table-column组件的summary-method属性。这个属性接受一个函数，用于计算合计值并返回。

下面是一个示例代码，演示了如何在el-table中自定义合计：

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, score: 80 },
        { name: '李四', age: 20, score: 90 },
        { name: '王五', age: 22, score: 85 }
      ]
    };
  },
  methods: {
    getTotalScore(param) {
      const { columns, data } = param;
      if (columns.length === 1) {
        // 只有一列时，直接返回合计值
        let total = 0;
        data.forEach(item => {
          total += item.score;
        });
        return `合计：${total}`;
      } else {
        // 多列时，返回空字符串
        return '';
      }
    }
  }
};
</script>

在上面的代码中，我们定义了一个el-table组件，其中包含了三个el-table-column组件。其中，第三个el-table-column组件的summary-method属性绑定了一个名为getTotalScore的方法。这个方法接受一个参数param，包含了当前列的信息和数据。在getTotalScore方法中，我们通过遍历数据计算出分数的合计值，并返回合计值。

通过以上代码，你可以实现el-table的自定义合计功能。你可以根据自己的需求，修改getTotalScore方法来计算其他列的合计值。