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. (jmeter笔记)jmeter远程启用服务器(分布式)

    1.在负载机上安装jmeter,修改jmeter\bin\jmeter.properties配置: 1)server.rmi.ssl.disable=false 改 server.rmi.ssl.di ...

  2. java生成uniappKey

    1.首先检查下自己的电脑有无java环境,打开CMD 输入java -version,如果有安装会跟下图一样: 2.在cmd命令行中执行keytool -genkey -alias mhhk -key ...

  3. Android 系统完整的权限列表

    访问登记属性  android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限  获取错略位置  android.perm ...

  4. postman-error:SyntaxError: Invalid shorthand property initializer

    SyntaxError: Invalid shorthand property initializer 速记属性初始值设定项无效 原因:

  5. vmware workstation 16.x安装windows server 2012 R2无法点击安装vmware tools选项

    在使用vmware workstation预设安装windows server 2012 R2后,提示需要先升级KBxxxxx更新才可以安装vmware tools,但是在安装了所需的更新后,发现菜单 ...

  6. TypeScript系列 -> 遇到报错 Cannot find name ‘console‘. Do you need to change your target library?ging the ‘lib‘ compiler option

    学习ts遇到的报错 Cannot find name 'console'. Do you need to change your target library?ging the 'lib' compi ...

  7. phpExcel常用方法详解

    phpExcel常用方法详解[附有php导出excel加超级链接] 发表于4年前(2012-07-20 12:57) 阅读(510) | 评论(0) 0人收藏此文章, 我要收藏 赞0 http://w ...

  8. Appium+Python UI自动化框架

    import datetimefrom appium.webdriver.common.touch_action import TouchActionfrom appium import webdri ...

  9. AX2012 使用HTML自定义popup内样式

    在Class Box下新增方法如下: public client static DialogButton yesNoHTML( str _text, DialogButton _defaultButt ...

  10. 【APT】响尾蛇(SideWinder)Hta文件自动解密C2

    前言 一个用于从SideWinder APT组织常用的hat文件中解密C2链接地址的Python脚本,示例代码对一些老的hat文件效果比较好,新的样本可能需要根据实际情况修改下,最初是用于对VT上命中 ...