vue3 element-plus table表尾做平均值

### 实现 Vue3 中 Element Plus 表格表尾显示平均值 为了在 `el-table` 组件中添加表尾来计算并展示列的平均值，可以利用 `footer-method` 属性自定义表格底部的内容。此属性允许通过指定的方法来自动生成表尾数据[^1]。 下面是一个具体的实现方式： #### 定义模板结构 ```html <template> <div id="app"> <el-table :data="tableData" border style="width: 100%" :summary-method="getSummaries" show-summary> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="score" label="分数" sortable></el-table-column> </el-table> </div> </template> ``` 这里使用了 `show-summary` 和 `summary-method` 来启用汇总行以及设置用于生成汇总信息的方法。 #### 编写 JavaScript 部分逻辑 ```javascript <script setup> import { ref } from 'vue'; const tableData = ref([ { name: "张三", score: 98, }, { name: "李四", score: 76, } ]); function getSummaries(param) { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = '平均'; return; } const values = data.map(item => Number(item[column.property])); if (!values.every(value => isNaN(value))) { sums[index] = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0); // 计算平均数而不是总和 sums[index] /= data.length; sums[index] = sums[index].toFixed(2); // 可选：保留两位小数 } else { sums[index] = '-'; } }); return sums; } </script> ``` 上述代码片段展示了如何创建一个简单的表格，并且当启用了 `show-summary` 后会调用 `getSummaries()` 函数来构建每一列对应的统计摘要。对于需要求均值的一列（这里是 `score`），先过滤掉任何可能存在的非数字项再做除法运算得出最终的结果。