首页 > 其他分享 >Element Table 根据列的label class 自动计算合计

Element Table 根据列的label class 自动计算合计

时间:2023-06-29 12:33:48浏览次数:36  
标签:opt const 求和 sums Element return table Table label

定义 table 求和方法

export function getSummariesByTableColumn(param, opt) {
  opt.sumText ??= '合计'
  opt.getColProperty ??= rawProp => rawProp

  const { columns, data } = param

  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums.push(opt.sumText)
      return
    }
    if (!column.labelClassName?.includes('need-sum')) { // 不需要求和
      sums.push('-')
      return
    }

    const property = opt.getColProperty(column.property)
    const values = data.map(item => Number(item[property]))

    sums[index] = values.reduce((prev, curr) => {
      const value = Number(curr)
      if (!isNaN(value)) {
        return prev + curr
      } else {
        return prev
      }
    }, 0)
  })
  return sums
}

在 table 上使用

    <el-table
    ...
    show-summary
    :summary-method="param => getSummariesByTableColumn(param)"
  >
    <el-table-column
        ...
        label="损耗数量"
        prop="count"
        label-class-name="need-sum"
    />
    ...
  </el-table>

这样就实现了一个比较通用 table 求和方法,不用当 table 需要求和时都要单独写一个 summary-method 方法,在内部在声明需要求和列的字段,进行求和运算。

标签:opt,const,求和,sums,Element,return,table,Table,label
From: https://www.cnblogs.com/taohuaya/p/17513893.html

相关文章

  • iview的table里面套Input
    {title:'误差下限',key:'yLowerLimitError',align:'center',minWidth:100,render:(h,params)=>{......
  • appium报错AttributeError: 'WebDriver' object has no attribute 'find_element_by_i
    解决方法:fromappium.webdriver.common.appiumbyimportAppiumBy#导入AppiumBysearch=driver.find_element(AppiumBy.ID,"com.android.settings:id/search")#编写格式:driver.find_element(by=AppiumBy.ACCESSIBILITY_ID,value='accessibility_id')思考流程:......
  • 图书商城项目练习①管理后台Vue2/ElementUI
    本系列文章是为学习Vue的项目练习笔记,尽量详细记录一下一个完整项目的开发过程。面向初学者,本人也是初学者,搬砖技术还不成熟。项目在技术上前端为主,包含一些后端代码,从基础的数据库(Sqlite)、到后端服务Node.js(Express),再到Web端的Vue,包含服务端、管理后台、商城网站、小程序/App,分......
  • leetcode -- Kth Smallest Element in a BST -- 简单重点
    https://leetcode.com/problems/kth-smallest-element-in-a-bst/这里注意BST的leftsubtree所有**node都要小于root,rightsubtree所有node都要大于**root。没有等于,并且是所有node思路1非递归用stack用inorder的模板就行classSolution(object):definorder(self,root,......
  • AI绘画StableDiffusion:云端在线版免费使用笔记分享-Kaggle版
    玩AI绘画(SD),自己电脑配置不够?今天给大家介绍一下如何baipiao在线版AI绘画StableDiffusion。Kaggle是世界上最大的数据科学社区,拥有强大的工具和资源,可帮助您实现数据科学目标。(每周可以免费使用30个小时)。文末有更多相关AI资源。 文章较长,可阅读原文享F受更佳阅读体验,以及获......
  • vue2+element-ui国际化实战不刷新页面
    背景有的时候我们做的项目需要支持中英文切换,那么我们就需要使用到vue-i18n插件步骤安装以及挂载安装vue-i18n依赖npmivue-i18n@8在src同级的目录下创建language文件下,在language文件夹下新增3个文件(index.js,en.js,zh.js)index.jsimportVuefrom"vue";importVu......
  • el-table 全选框 默认样式为文字 滑动变成单选框
    /deep/.el-table__header-wrapper.el-checkbox{width:55px;.el-checkbox__input{display:none;}&:hover{.el-checkbox__input{display:block;}&::before{displa......
  • 图书商城Vue+Element+Node项目练习(...)
    本系列文章是为学习Vue的项目练习笔记,尽量详细记录一下一个完整项目的开发过程。面向初学者,本人也是初学者,搬砖技术还不成熟。项目在技术上前端为主,包含一些后端代码,从基础的数据库(Sqlite)、到后端服务Node.js(Express),再到Web端的Vue,包含服务端、管理后台、商城网站、小程序/App,分......
  • 修改xampp中的mysql的密码报错,ERROR 1348 (HY000): Column 'Password' is not updatab
    xampp中的mysql(MariaDB)默认密码为空,进入mysql的bin目录,输入mysql-uroot-p,回车,无密码登录:查看所有数据库,选择mysql数据库:showdatabases;usemysql;使用update语句修改密码报错:ERROR1348(HY000):Column‘Password’isnotupdatable使用如下命令修改密码,并没有效果:使......
  • 使用element-plus的el-pagination分页组件的时候怎么换中文?
    element里面的分页是英文版的,但是项目需求是要中文的,可以用el-config-provider(切换系统语言)全局的配置选项,有locale属性,用来切换语言包做法如下:在main.js引入对应的包,代码如下:1import'normalize.css/normalize.css'2importElementPlusfrom'element-plus'3import'......