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
vue element表格合计问题的更多相关文章
- vue+element 表格formatter数据格式化并且插入html标签
前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...
- vue+Element 表格中的树形数据
template部分 只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...
- vue+element 表格筛选
筛选是element 组件 自己有的东西,按照文档撸 是没有问题 这里存在一个情况是,如果 筛选 的数据没有 那么整个表格为空白,产品要加提示 例如:暂无筛选的数据 解决方案:通过 ref 获取整 ...
- vue+element 表格导出Excel文件
https://www.cnblogs.com/bobodeboke/p/8867481.html 非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...
- vue+element表格
效果图 备注:前后端分离实现效果 接下来是代码环节 <template> <div class="comprehensive-table-container" ...
- vue+element 表格按需合并
这个功能难度感觉一般般吧,记录一下,以后碰到了直接来复制,懒得再写了 效果如下: 前6列是合并,后面的有几行,动态显示几行 重点是在数据处理上面做文章,合并列大家都会,数据处理呢?这样来处理, 我们拿 ...
- vue+Element 表格编辑
先上效果 <template> <div> <el-table :data="tableData" style="width: 100%&q ...
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
随机推荐
- LVS+keepalived实现负载均衡&高可用(原来以及部署方法)
一.ARP技术概念介绍 为什么讲ARP技术,因为平常工作中有接触.还有就是LVS的dr模式是用到arp的技术和数据. 1.什么是ARP协议 ARP协议全程地址解析协议(AddressResolutio ...
- JAVA XML转对象
最近遇到XML转对象进行业务操作的问题 这是我需要解析的XML 1,建XML对应自己需要参数的Bean.有的很长很乱,没必要全部建,只建自己需要的就行了 import lombok.Data; imp ...
- C# 内存回收
开发完成之后发现自己写的程序内存占用太高,找到如下解决方案 使用了一个timer每2s调用一次ClearMemory() #region 内存回收 [DllImport("kernel32. ...
- C# TreeView查获节点并选中节点
在一个项目中用到了TreeView,但是每次刷新TreeView的数据之后,所有的节点都会折叠起来 非常影响用户体验,使用下面的方法可以解决这个问题 string LastSelectNode = & ...
- 实验:笔记本电脑做桥接有线网络,笔记本通过wifi连手机热点,,硬件通过笔记本的有线网口上网
1.问题 我们需要做实验,将我们设计的W5500实验板上internet, 搭建环境比较麻烦. 1)学校上网需要先HTTP认证: 2)家里经常路由器固定位置,没有足够长的网线: 3)有时候需要临时搭 ...
- [iOS] 对 UItableView 等界面(ClipsToBounds) 同时使用 圆角和阴影
展示内容的界面会被 ClipsToBounds = YES(按边缘剪切),但同时需要圆角和阴影效果. 一个界面,ClipsToBounds = YES 之后,阴影会被剪切,不再展示. 感觉只能使用多个 ...
- 阿里云 rocketMq 延时消息
初始化消费者和生产者 生产者 设置rocketmq的accesskey 和secretkey 以及rocketmq的 binder server. 首先 编辑一个配置类,将关于配置rocketmq的东 ...
- Python 的入门学习之 Day4~6 ——from”夜曲编程“
Day 4 time: 2021.8.1. 打卡第四天.今天起得很早(7点多一些),很棒,而梳头发更快些就更好了.我也算渐渐养成了晨间学习的习惯吧,一起床就心心念念着Python课程,这让我感觉到了生 ...
- 2202.10.11 CSP-S 2021 测试总结
2022.10.11 CSP-S 2021 测试总结 这场打的好心累, \(T1\) 想了 \(1\) 个多小时才想出来的, \(T2\),\(T4\)题意赛时还没读明白. \(T1\):廊桥分配 \ ...
- Redis Template部分接口学习记录
Redis Template是操作redis的一个封装模板,让我们更加简便的去操作redis. 操作键类型的接口: GeoOperations Redis的地理空间操作,如GEOADD,GEORADI ...