首页 > 其他分享 >vue表格之:summary-method="getSummaries"与show-summary(列求和)

vue表格之:summary-method="getSummaries"与show-summary(列求和)

时间:2022-08-25 15:57:00浏览次数:54  
标签:index vue return show column sums summary const

//表格列求和 

<el-table :summary-method="getSummaries" show-summary></el-table> 

getSummaries (param) {const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 1) {
          sums[index] = '/'
          return
        }
        if (index === 2) {
          sums[index] = '/'
          return
        }
        if (index === 3) {
          sums[index] = '/'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property === 'total' || column.property === 'used' || column.property === 'unused') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          // sums[index]
        }
      })
    this.sums = sums
   return sums
}

 注意:data中定义sums:[] 
<!-- 早餐统计 -->
<div class="statistics">
    <el-col style="text-align:left;margin:20px 30px 0;font-weight:700;" :span="24">早餐统计</el-col>
    <el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="8">{{sums[4]}}<br><b>总份数</b></el-col>
    <el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="8">{{sums[5]}}<br><b>已使用</b></el-col>
    <el-col style="text-align:center;margin-top:50px;line-height:50px;" :span="8">{{sums[6]}}<br><b>未使用</b></el-col>
</div>

 

标签:index,vue,return,show,column,sums,summary,const
From: https://www.cnblogs.com/shuihanxiao/p/16624510.html

相关文章

  • vue接口获取路由菜单
    menuFormat.js(格式化路由表)exportconstinitMenu=(data)=>{letlist=[];data.forEach(router=>{let{path,comp......
  • Vue项目使用高德地图
    流程:注册账号获取KEY安装使用注册链接:https://lbs.amap.com/选择Web端(JSAPI),同时需要域名限制请按提示进行输入:创建完成后即可看到KEY。安装高德地图JSAPI......
  • vue2的nextTick使用
    1、关于nextTick。vue中的Dom更新是异步的,是异步的意味着当被处理数据是动态变化时,此时对应的Dom未能及时更新(同步更新)就会导致数据已经更新(model层已经更新)而视力层未更......
  • vue集成elementUI
    vue集成elementUI1.使用npm安装elementui模块:指令:npm/cnpminstallelement-ui–S2.安装按需引入的插件:指令:npminstallbabel-plugin-component-D3.设置.babe......
  • vue 安装插件 eslint检测警告
    npm安装报错npmERR!codeERESOLVEnpmERR!ERESOLVEcouldnotresolvenpmERR!npmERR!问题原因安装的包与已经存在的包有冲突解决办法npminstallxxx--fo......
  • Vue项目创建(完整步骤级版本查看)
    涉及软件版本:Nodev14.17.0;npm6.14.13;vue3.2.13;@vue/cli5.0.8一:安装node、npm1.检查Node,未安装【https://nodejs.org/en/】访问网址下载最新版安装2.检查......
  • vue中element-ui table滚动加载
    //1.在main.js里注册 Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.ad......
  • vue3 vuex4 store的响应式取值
    场景:在页面中点击按钮,数量增加,值是存在store中的,点击事件,值没变。<scriptsetuplang="ts">import{useStore}from'@/vuex';conststore=useStore()constonSu......
  • vue使用rem (手机端PC端通用)
    只有PC端时main.js newVue({ router, store, render:h=>h(App),created(){//实例创建完成后被立即调用rem换算方法,解决内容闪现问题......
  • VUE 基础知识总结
    VUE的介绍VUE的导包<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><!--开发环境版本--><scriptsrc="https://cdn.jsdel......