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

el-table合计换行显示

效果图

实现

1、使用到的参数

官网链接:element-table

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

2、代码演示

javascript 复制代码
    <el-table :data="tableData" style="width: 100%" height="250" :summary-method="getSummaries" show-summary>
      
    </el-table>
javascript 复制代码
/**
     * 合计的方法
     * @param param
     * @returns {*[]}
     */
    getSummaries (param) {
      const { columns, data } = param
      const 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
    },
相关推荐
Mintopia3 分钟前
Three.js 中的噪声与图形变换:一场数字世界的舞蹈
前端·javascript·three.js
Mintopia7 分钟前
计算机图形学漫游:从像素到游戏引擎的奇幻之旅
前端·javascript·计算机图形学
钢铁男儿8 分钟前
C#接口实现详解:从理论到实践,掌握面向对象编程的核心技巧
java·前端·c#
前端的日常29 分钟前
以下代码,那一部分运行快
前端
GeGarron30 分钟前
Drawing:专注高效画图,让每一次创作都值得被珍藏
前端
梨子同志30 分钟前
Vue v-model 指令详解
前端·vue.js
杨进军31 分钟前
简易实现 React 页面初次渲染
前端·react.js·前端框架
血舞之境33 分钟前
同名类引发问题:没见过世面导致遇见各种诡异的问题
前端
杨进军33 分钟前
实现 React 多个原生标签子节点渲染
前端·react.js·前端框架
前端的日常33 分钟前
AI 工具中,经常提到的 mcp 是什么,有哪些与前端方向结合的场景?
前端