Vue使用ElementUI对table的指定列进行合算

在Vue中使用ElementUI时，可以通过自定义列模板（scoped slot）来实现对特定列的计算。以下是一个简单的示例，演示如何对table的指定列进行合算：

<template>
  <el-table :data="tableData" style="width: 100%">
    <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 label="合计">
      <template slot-scope="scope">
        {{ calculateTotal(scope.row) }}
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: 'Tom', amount1: 10, amount2: 20 },
        { date: '2016-05-04', name: 'Jerry', amount1: 30, amount2: 40 },
        // ...更多数据
      ]
    };
  },
  methods: {
    calculateTotal(row) {
      // 这里可以根据需要合算的列进行计算
      return row.amount1 + row.amount2;
    }
  }
};
</script>

在这个例子中，我们定义了一个名为calculateTotal的方法，它接受当前行的数据作为参数，并返回合算后的结果。在自定义列模板中，我们使用slot-scope属性来接收当前行的数据（scope.row），并将其传递给calculateTotal方法。这样，每行的合算结果都会显示在对应的单元格内。