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表格合计问题的更多相关文章

  1. vue+element 表格formatter数据格式化并且插入html标签

    前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...

  2. vue+Element 表格中的树形数据

    template部分   只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...

  3. vue+element 表格筛选

      筛选是element 组件 自己有的东西,按照文档撸 是没有问题 这里存在一个情况是,如果 筛选 的数据没有 那么整个表格为空白,产品要加提示 例如:暂无筛选的数据 解决方案:通过 ref 获取整 ...

  4. vue+element 表格导出Excel文件

    https://www.cnblogs.com/bobodeboke/p/8867481.html  非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...

  5. vue+element表格

    效果图 备注:前后端分离实现效果 接下来是代码环节 <template>   <div class="comprehensive-table-container" ...

  6. vue+element 表格按需合并

    这个功能难度感觉一般般吧,记录一下,以后碰到了直接来复制,懒得再写了 效果如下: 前6列是合并,后面的有几行,动态显示几行 重点是在数据处理上面做文章,合并列大家都会,数据处理呢?这样来处理, 我们拿 ...

  7. vue+Element 表格编辑

    先上效果 <template> <div> <el-table :data="tableData" style="width: 100%&q ...

  8. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  9. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  10. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

随机推荐

  1. 供配电一次测 PT柜 解释

    文章来源: PT柜_百度百科 (baidu.com)  视频介绍 很多电工不清楚的高压PT柜,老电工带你了解工作原理和作用_搜狐汽车_搜狐网 (sohu.com) 很多电工怕PT柜,今天电气成套设计实 ...

  2. Software--电商平台系统--P2 支撑基础设施 Infrastructure

    2018-01-11  18:19:49 架构 客户体验 Ajax 交互技术. 网站快速加载且响应灵敏,则应该缓存商品数据. 灵活的缓存机制,以支持任何类型的存储(即分布式存储或内存中存储). 日志功 ...

  3. 工作三年的.NET程序员现状及其感悟

    算上实习,已经工作三年了.时间过的真的很快,我也从一开始的非标自动化行业成功转入了医疗器械行业,如今在苏州园区的BioBay工作,这里我每天都工作的挺开心的.也于11.6号第一次和如今的女朋友见面,并 ...

  4. Sentinel 高可用流量管理框架

    出处:https://www.oschina.net/p/sentinel?hmsr=aladdin1e1 Sentinel 是面向分布式服务架构的高可用流量防护组件,主要以流量为切入点,从限流.流量 ...

  5. TFLCD编程过程中遇到的问题之.\Objects\EXTI_Project.axf: Error: L6218E: Undefined symbol POINT_COLOR (referred from tflcd.o).

    在TFLCD屏幕中遇到的问题及解决方案 1.问题提出 在对正点原子提供的有关TFLCD屏幕做移植过程中,编译过程中没有报错,但是链接时就出现了报错,报错信息如下图所示: 像这种错误,无法定义到错误所在 ...

  6. CPU密集型和IO密集型与线程池的配置

    CPU密集型任务应配置尽可能小的线程,如配置CPU数目+1个线程的线程池.由于IO密集型任务线程并不是一直在执行任务,则应配置尽可能多的线程,如2*CPU数目.

  7. Netty基本编写

    一. public class Server { public static void main(String[] args) throws Exception { //1 创建线两个程组 //一个是 ...

  8. 04 ajax执行php并传递参数

    做这个事情之前要导入jQuery js的方式 _this.value1 = "abc"; _this.value2 = 1; $.ajax({ url: 'xxxxxx.php', ...

  9. Java基础Day5-数组

    一.数组声明创建 首先必须声明数组变量,才能在程序中使用数组. 声明数组变量的语法如下: dataType[] arrayRefVar; 例如: int[] nums; Java语言使用new操作符来 ...

  10. homework2软件方法论

    什么是软件工程方法论? 1.软件工程是一个方法论,就是我们在开始一个项目时,大体框架一定要有这么一个概念,而具体实施时,必须根据公司一些特点,优化项目开发的流程,这样才是有实效而方法论只是软件工程的结 ...