el-table里面的sum-text用法

### el-table `sum-text` 属性使用方法 在 Element UI 的 `<el-table>` 组件中，`sum-text` 是一个用于自定义合计行显示文本的属性。当表格启用了总计功能时，默认情况下会在表尾展示一行汇总信息。通过设置 `sum-text` 可以改变这行文字前缀。 #### 基本语法 ```html <el-table :data="tableData" show-summary :summary-method="getSummaries"> <!-- 表格列配置 --> </el-table> ``` 为了实现更灵活的控制，通常会配合 `show-summary` 和 `summary-method` 一起使用： - `show-summary`: 是否显示合计行。 - `summary-method`: 自定义获取合计的方法函数，该函数接收四个参数并返回数组形式的结果，分别代表每列的合计值。 - `sum-text`: 设置合计行前面的文字说明，默认为 "合计"。 下面是一个具体的例子来解释如何应用这些特性[^1]。 #### 示例代码 假设有一个简单的销售记录表格，包含商品名称、数量和金额三列，并希望在最后加上一行统计总销量和总收入的信息。 ```vue <template> <div> <el-table :data="salesRecords" border stripe style="width: 100%" show-summary :summary-method="handleSummary" sum-text="总计：" > <el-table-column prop="product_name" label="产品"></el-table-column> <el-table-column prop="quantity" label="数量" align="right"></el-table-column> <el-table-column prop="amount" label="金额(元)" align="right"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { salesRecords: [ { product_name: '苹果', quantity: 5, amount: 30 }, { product_name: '香蕉', quantity: 8, amount: 24 }, { product_name: '橙子', quantity: 6, amount: 36 } ] }; }, methods: { handleSummary({ columns, data }) { 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] += ' 元'; } else { sums[index] = '-'; } }); return sums; } } }; </script> ``` 在这个案例里，`sum-text="总计："` 定义了合计行开头部分的内容；而 `handleSummary()` 方法负责计算各列的具体统计数据，并按照一定格式呈现出来[^2]。