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
    },
相关推荐
小镇程序员1 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 分钟前
前端图像处理(一)
前端
程序猿阿伟10 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒12 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪20 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背23 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M34 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc34 分钟前
学习electron
javascript·学习·electron
盛夏绽放42 分钟前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5