• 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;
        },
    },
  • 相关阅读:
    数据库索引学习
    JavaScript提高:002:ASP.NET使用easy UI实现tab效果
    jQuery效果之显示与隐藏
    leetcode
    走进Struts2(五)— 值栈和OGNL
    Html中的超链接
    再理解 as3.0接口
    easyui combobox 三级级联 input 两种实现
    三层登录实例VB.NET版具体解释---理论加实战篇
    如何用Delphi开发网游外挂
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/15778218.html
Copyright © 2020-2023  润新知