vue element表格合计问题

vue element计算表格合计问题


问题:当表格的el-table-column标签下的属性prop属性值为‘对象.属性’时,将不能自动合计。
例如:

 

     <el-table
            border
            v-loading="loading2"
            :data="dataBill"
            style="width: 100%;text-align:left;"
            show-summary
            height="720"
          >
            <el-table-column type="index" label="序号" width="90" align="center"></el-table-column>
            <el-table-column prop="statisticsDate" label="日期" align="center"></el-table-column>
            <el-table-column prop="order.count" label="订单数量" align="center"></el-table-column>
            <el-table-column prop="order.total" label="合计金额" align="center"></el-table-column>
    </el-table>

 

这里的订单数量和合计金额将不能自动合计。

解决思路:把 porp属性值修改为属性格式(prop:“count”)。怎么修改呢????
实现方法:遍历循环修改。具体如下

 

  for (var i = 0; i < data.length; i++) {
            data[i].orderCount = data[i].order.count;
            data[i].orderTotal =
              data[i].order.total;
          }

 

最后把订单数量和合计金额的 prop修改如下,就能自动合计啦

    <el-table-column prop="orderCount" label="订单数量" align="center"></el-table-column>
    <el-table-column prop="orderTotal" label="合计金额" align="center"></el-table-column>

 


转载地址:https://blog.csdn.net/weixin_42857055/article/details/99624826

posted @ 2020-03-23 16:33  海上蝴蝶  阅读(6891)  评论(2编辑  收藏  举报