element--el-table合计换行显示

本文主要是介绍element--el-table合计换行显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

el-table合计换行显示

效果图
实现
- 1、使用到的参数
- 2、代码演示

效果图

在这里插入图片描述

实现

1、使用到的参数

官网链接：element-table
在这里插入图片描述

将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。

summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中

show-summary设置为true就会在表格尾部展示合计行

2、代码演示

在这里插入图片描述

    <el-table :data="tableData" style="width: 100%" height="250" :summary-method="getSummaries" show-summary></el-table>

/*** 合计的方法* @param param* @returns {*[]}*/getSummaries (param) {const { columns, data } = paramconst sums = []columns.forEach((column, index) => {if (index === 0) {sums[index] = '总价'return}/*** 计算逻辑,计算完成后换行展示*/sums[index] = <p>优秀为：1<br/>好为：1<br/>中等为：1<br/>差为：1<br/></p>})return sums},