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 ...
随机推荐
- 简单的python线程池实现线程安全demo
from concurrent.futures import ThreadPoolExecutor import threading import time import sys sys.path.a ...
- TypeScript 元组
TypeScript 元组 我们知道数组中元素的数据类型都一般是相同的(any[] 类型的数组可以不同),如果存储的元素数据类型不同,则需要使用元组. 元组中允许存储不同类型的元素,元组可以作为参数传 ...
- java-正确打日志
使用 slf4j 使用门面模式的日志框架,有利于维护和各个类的日志处理方式统一. 实现方式统一使用: Logback 框架 打日志的正确方式 什么时候应该打日志 当你遇到问题的时候,只能通过 debu ...
- MindManager离线安装包官网下载
软件官网:https://www.mindjet.com/ 注意:不建议在思杰马克丁及其相关合作网站下载该软件,更不建议在其旗下站点购买该软件授权. 目前来说,官网正常下载的话它会要求你填写一些信息, ...
- google api 后端打点上报
https://developers.google.com/analytics/devguides/collection/protocol/ga4/sending-events?client_type ...
- OSS管理文件(Node.js)
let OSS = require('ali-oss'); let config = { region: 'oss-cn-hangzhou', //你的Region 注意 这个只要 空间名 不要 ht ...
- POJ 1830 开关问题 异或高斯消元
题目链接 将题目转化为矩乘问题 构建一个 \(n \times n\) 的开关信息矩阵,其中第 \(i\) 列第 \(j\) 行的元素为 \(0 / 1\) 代表在改变开关 \(i\) 的情况下开关 ...
- vmware workstation 16.x安装windows server 2012 R2无法点击安装vmware tools选项
在使用vmware workstation预设安装windows server 2012 R2后,提示需要先升级KBxxxxx更新才可以安装vmware tools,但是在安装了所需的更新后,发现菜单 ...
- vantUI <van-uploader> 上传图片,如何获取图片的尺寸
html代码 <van-uploader preview-size="300px" style="width:300px;display:block;margin: ...
- 【APT】Hades APT组织针对乌克兰发起网络攻击事件分析
背景 Hades一个充满神秘色彩的APT组织,该组织因为2017年12月22日针对韩国平昌冬奥会的攻击活动被首次发现,后来卡巴斯基将该次事件的攻击组织命名为Hades.但是该攻击组织的归属问题却一直未 ...