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;
    },
},

 

posted @ 2022-01-08 14:32  bingxiaoxiao  阅读(1409)  评论(0编辑  收藏  举报