vue3 el-table 列数据合计

在 Vue 3 中使用 Element Plus 的 <el-table> 组件时，如果你想要对列数据进行合计（即计算某一列的总和），你可以通过几种方式来实现。以下是几种常见的方法：

方法1：使用计算属性

你可以在 Vue 组件的 computed 属性中计算合计值。

<template>
  <el-table :data="tableData" border 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 prop="amount" label="金额"></el-table-column>
  </el-table>
  <div>合计: {{ totalAmount }}</div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
const tableData = ref([
  { date: '2023-04-01', name: '张三', amount: 100 },
  { date: '2023-04-02', name: '李四', amount: 200 },
  // 更多数据...
]);
 
const totalAmount = computed(() => {
  return tableData.value.reduce((sum, item) => {
    return sum + item.amount;
  }, 0);
});
</script>

方法2：使用方法（Method）

你也可以在 Vue 组件的方法中计算合计值，然后在模板中调用这个方法。

<template>
  <el-table :data="tableData" border 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 prop="amount" label="金额"></el-table-column>
  </el-table>
  <div>合计: {{ calculateTotalAmount() }}</div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  { date: '2023-04-01', name: '张三', amount: 100 },
  { date: '2023-04-02', name: '李四', amount: 200 },
  // 更多数据...
]);
 
function calculateTotalAmount() {
  return tableData.value.reduce((sum, item) => {
    return sum + item.amount;
  }, 0);
}
</script>

方法3：使用 Element Plus 的 <el-table-column> 的 summary-method 属性（适用于 Element Plus 2.x）

如果你使用的是 Element Plus 的旧版本，可以利用 <el-table> 的 summary-method 属性来直接在表格底部显示合计。但请注意，Element Plus 在 Vue 3 中通常指的是最新版本，该版本可能不支持此属性或其用法有所变化。对于 Vue 3 和 Element Plus 的最新版本，推荐使用计算属性或方法。如果你在使用旧版本的 Element Plus，可以这样设置：

<template>
  <el-table :data="tableData" border style="width: 100%" show-summary :summary-method="sumMethod">
    <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="amount" label="金额"></el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

// 示例数据初始化
const tableData = ref([
  { date: '2023-01-01', name: '张三', amount: 100 },
  { date: '2023-01-02', name: '李四', amount: 200 },
  { date: '2023-01-03', name: '王五', amount: 300 }
]);

// 自定义合计方法
const sumMethod = ({ columns, data }) => {
  const sums = [];
  
  columns.forEach((column, index) => {
    if (index === 0) {
      // 第一列显示"合计"
      sums[index] = '合计';
      return;
    }
    
    if (column.property === 'amount') {
      // 金额列计算总和
      const values = data.map(item => Number(item[column.property]));
      sums[index] = values.reduce((acc, curr) => acc + curr, 0);
      
      // 添加单位/格式化显示
      sums[index] += ' 元';
    } else {
      // 非数值列留空
      sums[index] = '';
    }
  });

  return sums;
};
</script>

对于 Vue 3 和 Element Plus 的最新版本，推荐使用计算属性或方法，因为 summary-method 在新版中可能已经被弃用或用法有所改变。确保查阅最新的官方文档以获取最准确的信息和示例