{{format('0')}} {{format('514')}} {{format('2622')}}

ElementUI中Table表格自定义计算方法 [ 技术杂谈 ]

九叶的小窝 文章 正文

As Long As You Love Me.
分享

九叶

{{nature("2021-05-28 12:46:42")}}更新

自定义方法

table 中 使用 summary-method 指定自定义计算方法

  <el-table
    :data="tableData"
    border
    show-summary
    :summary-method="getSummaries"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="数值 1">
    </el-table-column>
    <el-table-column
      prop="amount2"
      sortable
      label="数值 2">
    </el-table-column>
    <el-table-column
      prop="amount3"
      sortable
      label="数值 3">
    </el-table-column>
  </el-table>
        tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      /** 计算单元格 */
      getSummaries(param) {
        const { columns, data } = param;
        const sums = []; //声明变量
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "合计";
            return;
          }
          const values = data.map((item) => Number(item[column.property]));
          if (
            //需要显示和合计纵列
            column.property == "amount1"  ||
            column.property == "amount2"  ||
            column.property == "amount3"  
          ) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index]+='元';
          } else {
          }
        });
        return sums;
      },

image.png

特别注意: 如果循环的时候不加:prop="item.prop" 自定义合计的时候

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

property无法匹配到对应的数据

评论 0
0
{{userInfo.data?.nickname}}
{{userInfo.data?.email}}
TOP 2
Minecraft | [1.12.2] 核电工艺模拟器 1.2.25 —— 汉化版

{{nature('2021-12-07 15:29:00')}} {{format('2436')}}人已阅读

TOP 3
SSM搭建Spring单元测试环境

{{nature('2021-01-31 20:01:00')}} {{format('1043')}}人已阅读

TOP 4
dispatcher-servlet.xml文件配置模板

{{nature('2020-12-11 21:17:00')}} {{format('958')}}人已阅读

TOP 5
Windows平台Nacos启动报错无法创建Bean实例

{{nature('2021-04-22 15:16:00')}} {{format('938')}}人已阅读

目录

标签云

ElementUI

一言

# {{hitokoto.data.from || '来自'}} #
{{hitokoto.data.hitokoto || '内容'}}
作者:{{hitokoto.data.from_who || '作者'}}
自定义UI
配色方案

侧边栏