el-table列表合计及不显示问题,以及树形teble

template代码:

<el-table
  :data="tableData"
  :height="460"
  ref="table"
  :cell-style="cellStyle"
  border
  show-summary
  :summary-method="getSummaries"
>
   <el-table-column type="selection" width="55" align="center" />
   <el-table-column label="序号" :width="$TW.sn" fixed>
       <template slot-scope="scope">
           <span>{{(pageNoCode - 1) * pageSizeCode + scope.$index + 1}}</span>
       </template>
   </el-table-column>
   <template v-for="(table, index) in tableTheadOptions">
      <el-table-column
         :fixed="table.fixed || false"
         :key="index"
         :type="table.type"
         :label="table.label"
         :min-width="table.width"
         :prop="table.prop"
         :align="table.align || 'left'"
         :header-align="table.headerAlign || 'left'"
         show-overflow-tooltip
         >
            <template slot-scope="scope">
              <template v-if="table.prop === 'totalMeasurementAmount'">
                <div>
                  {{
                   moneyWithZeroes(
                     scope.row.totalMeasurementAmount,
                     Accuracy.amountViewDecimalPlace
                      ) || " "
                   }}
                 </div>
               </template>
               <template v-else>{{ scope.row[table.prop] }}</template>
            </template>
       </el-table-column>
    </template>
</el-table>

javaScript: 正常table

    getSummaries(param) {
      //此处打印param可以看到有两项,一项是columns,一项是data,最后一列可以通过columns.length获取到。
      const { columns, data } = param;
      const len = columns.length;
      const sums = [];
      columns.forEach((column, index) => {
        //如果是第一列,则最后一行展示为“总计”两个字
        if (index === 0) {
          sums[index] = "合计";
          //如果是最后一列,索引为列数-1,则显示计算总和
          //如果是多列计算 可以用逻辑运算符 || index == 1 || index == 2
        } else if (index === len - 2) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = sums[index].toFixed(
              this.Accuracy.amountViewDecimalPlace
            );
          } else {
            sums[index] = "N/A";
          }
          //如果是除了第一列和最后一列的其他列,则显示为空
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },

javaScript:树形table 

    getSum(tree, idx, sums, index) {
      if (tree && tree.length > 0) {
        tree.map(item => {
          this.getSum(item.children, idx, sums, index);
          sums[index] += Number(item[idx]);
        });
      }
    },
    getSummaries(param) {
      const { columns, data } = param;
      const len = columns.length;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
        } else if (index === len - 1 || index === len - 3) {
          sums[index] = 0;
          this.getSum(data, column.property, sums, index);
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },

问题:Element的el-table组件在设置表格高度heoght 同时 开启合计行show-summary ,项目中合计这一列不显示,但是缩放下页面或者稍微修改下F12里dom中的东西就又显示了

方法一:修改el-table样式

.el-table{
        overflow:visible !important;
  }

方法二:添加updated生命周期 对Table重新布局

updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值