zoukankan      html  css  js  c++  java
  • element ui table 表尾合计行 错位优化

         <el-table v-loading="listLoading"
                    :data="dataList"
                    :header-cell-style="{ background: '#f5f7fa' }"
                    element-loading-text="拼命加载中"
                    @selection-change="(list) => (selectList = list)"
                    border
                    @row-click="handleRowClick"
                    ref="activityTable"
                    :summary-method="getSummaries"
                    :show-summary="true"
                    :height="tableHeight"
                    highlight-current-row>
            <el-table-column type="selection"
                             align="center"
                             width="65"
                             fixed></el-table-column>
            <el-table-column label="订单编号"
                             align="center"
                             prop="orderSn"
                             width="180"
                             fixed
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="客户名称"
                             align="center"
                             prop="remark"
                             width="140"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="下单时间"
                             align="center"
                             width="140"
                             show-overflow-tooltip
                             prop="createTime"
                             :formatter="formatTime"></el-table-column> 
    
          </el-table>
      updated () {
        this.$nextTick(() => {
          this.$refs['activityTable'].doLayout();
        })
      },
      methods: {
        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 (
              !values.every((value) => isNaN(value)) &&
              (column.property == "useRebatePrice")
            ) {
              sums[index] = values
                .reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return Number(prev) + curr;
                  } else {
                    return Number(prev);
                  }
                }, 0)
                .toFixed(2); 
            } else if (column.property == "orderPrice") {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return Number(prev) + curr;
                } else {
                  return Number(prev);
                }
              }, 0);
            } else {
              sums[index] = "";
            }
          });
          return sums;
        },
    },
  • 相关阅读:
    ServU使用方法及应用技巧
    Mozilla公布火狐4详情:更快 更支持开放标准
    FastReport4.6程序员手册_翻译 转
    Delphi调用C写的dll
    动态创建Fastreport
    字符串通用类
    去除全角半角字符
    系统运行的命令集锦
    打印机的大小设置
    旋转字体的设置
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/15778218.html
Copyright © 2011-2022 走看看