vue element计算表格合计问题

最新推荐文章于 2025-02-24 09:18:59 发布

小于林等于二

最新推荐文章于 2025-02-24 09:18:59 发布

阅读量7.2k

点赞数

文章标签： vue element 合计

本文链接：https://blog.csdn.net/weixin_42857055/article/details/99624826

版权

本文介绍了如何在Vue Element UI中解决表格合计问题，通过修改prop属性值为属性格式（如prop：“count”），并通过遍历循环实现自动合计功能。详细步骤和代码示例可在原文档中查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue element计算表格合计问题

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

 <el-table
            border
            v-loading="loading2"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"
            ref="multipleTable"
            :data="dataBill"
            tooltip-effect="dark"
            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