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 ...
随机推荐
- Little Girl and Maximum Sum CodeForces - 276C - 差分
给定一个数列 \(a= { a_1,a_2,...,a_n }\) 以及 \(q\) 次查询. 其中第 \(i\) 次查询如同:\(l_i, r_i\),意指求 \(\sum_{j=l_i}^{r_i ...
- tidb自动处理僵尸进程脚本
[root@host-2 wj]# vi kill_tidb_zombie.sh #!/bin/bash source /etc/profile cat /dev/null > /tmp/sql ...
- Java数组之三种初始化及内存分析
内存分析 Java内存 堆: 1.存放new的对象和数组 2.可以被所有的线程共享,不会存放别的对象引用 栈: 1.存放基本变量类型(会包含这个基本类型的具体数值) 2.引用对象的变量(会存放这个引用 ...
- java功能-发送http请求
一.发送json public void test() throws IOException { //参数封装--------------------------------------------- ...
- 2022-3-29内部群每日三题-清辉PMP
1.一名高管,也是上报升级的联系人,在生产启动期间加入一个敏捷团队.在下一个sprint之前,该高管向团队询问应包含的特性.该高管应已参加什么会议? A.回顾会议. B.每日scrum会议. C.Sp ...
- idea使用EasyCode集成ruoyi框架自动生成代码
1.ruoyi框架源码获取 https://gitee.com/zhangmrit/ruoyi-cloud/tree/nacos/ 2.需要ruoyi调整部分代码 public class BaseC ...
- Vue3.0 编译做了哪些优化
a. 生成 Block tree Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的,单个组件内部 需要遍历该组 件的整个 vnode 树.在 2.0 里,渲染效率的快慢与组件大小成正相关 ...
- 梯度下降算法VS正规方程算法
梯度下降算法的大家族: ①批量梯度下降:有N个样本,求梯度的时候就用了N个样本的梯度数据 优点:准确 缺点:速度慢 ②随机梯度下降:和批量梯度下降算法原理相似,区别在于求梯度时没有用所有的N歌样本数据 ...
- 【git】 的基本命令
1.push命令: 2.pull命令: 3.commit命令: 4.add命令: 5.checkout命令: 6.fetch/clone命令. 7.版本回退 git log 查看版本号(每次提交 ...
- 关于html中元素和布局的笔记
一.元素类型 css标准文档流:默认的网页从左到右,从上到下的排列方式显示出网页效果 类型: 1.块级元素:(div,p,table--) a.独占一行 b.可以设置宽度和高度 c.可以设置左右居中( ...