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 在新版中可能已经被弃用或用法有所改变。确保查阅最新的官方文档以获取最准确的信息和示例