vue element计算表格合计问题

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

 <el-tableborderv-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-summaryheight="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

vue element计算表格合计问题相关推荐

vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和
vue element el-table 表格勾选获取几列数据求和 el-table表格勾选求和先看案例如下图所示:el-table 勾选后求出支付金额数据,计算出总金额数据. 我们来一步步分析方便 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果: 1.在需要 ...
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
一.效果图目前10种筛选类型看看是否是你需要的,本文可能有点长 ,我尽可能的给讲清楚,包括源码附上二.无聊发言点击当前行跳转部分数据后缀追加图标某列数据根据状态增加颜色标识三.前言实现 ...
vue动态计算表格列两个时间的差值
方法中用到了插件moment.js,使用day.js也是一样的.这两个时间工具超好用,不知道的快去了解一下,从此不需要new Date(). moment官网地址:http://momentjs.cn ...
Vue+Element实现表格筛选
安装Vue和el什么的就不说了,也吐槽样式丑,作者懒得写样式主要是为了展示写法和功能虽然我自己都想吐槽 <template><div style="margin-top: ...
element plus 表格合计
参考 table 加上 show-summary :summary-method="getSummaries" <el-tablev-loading="loadin ...
vue element ui表格下载成xlsx工作表格
我们需要两个依赖打开项目终端输入 npm i file-saver -S 和 npm i xlsx -S 在需要使用的组件中引入依赖 import FileSaver from 'file-sav ...
Vue+element 实现表格的动态增加行
功能需求:1.实现一个表格,可以增加行 ,可以修改每一行的数据: 2.获取选中的行的数据,获取选中行的索引:3.根据获取的行的索引删除相应的一行的数据. tableData的数据是写死的,具体开发可以 ...

vue element计算表格合计问题

vue element计算表格合计问题

vue element计算表格合计问题相关推荐

最新文章

热门文章