element table合计行自定义及单元格合并
问题:项目需求要求table下面加合计一行
图片展示:
代码示例:
TEMPLATE:
span-method是自定义table单元
show-summary是展示合并行
summary-method是自定义合并行
<templete>
<div>
<el-table
ref="table"
v-loading="loading"
class="table-wrap"
:data="inventorys"
:span-method="arraySpanMethod"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
row-key="id"
lazy
fit
stripe
show-summary
:summary-method="getSummaries"
border
>
<el-table-column label="序号" align="center">
<template slot-scope="{ row, $index }">
{{ ($index + 1) * currentPage }}
</template>
</el-table-column>
<el-table-column prop="productCode" label="产品编号" align="center">
<template slot-scope="{ row }">
{{ row.productCode }}
</template>
</el-table-column>
<el-table-column prop="availQuantity" label="可售数量" sortable align="center">
<template slot-scope="{ row }">
{{ row.availQuantity }}
</template>
</el-table-column>
<el-table-column prop="quantity" label="在库数量" align="center">
<template slot-scope="{ row }">
{{ row.quantity }}
</template>
</el-table-column>
</el-table>
</div>
</templete>
arraySpanMethod() {
//table合计行合并单元格
setTimeout(() => {
if (this.$refs.table.$el) {
let current = this.$refs.table.$el
.querySelector('.el-table__footer-wrapper')
.querySelector('.el-table__footer')
let cell = current.rows[0].cells
//cell[1].style.display = 'none'
cell[1].colSpan = '9'
}
}, 50)
},
getSummaries(param) {
//table自定义合计行方法summary-method
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计可售总数量';
return
}
if(index===9){
const values = data.map(item => Number(item[column.property]))
sums[1] = values.reduce((prev, curr) => {
return prev + curr
}, 0)
sums[1]=sums[1].toFixed(2)
} })
return sums
}
--------END
element table合计行自定义及单元格合并的更多相关文章
- Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等
目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...
- element-ui 格式化树形数组在table组件中展示(单元格合并)
最近做的项目涉及到很多单元格合并问题,element-ui组件对于单元格合并的处理虽然很灵活,但是需要事先计算好每个单元格合并的rowspan和colspan,直接在span-method属性中计算实 ...
- vue+ element table如何给指定的单元格添加点击事件?
今天使用vue,以及element-ui这个框架时,发现业务需要在表格里加一个连接跳转,当时立刻打开element的官网,进行查看http://element-cn.eleme.io/#/zh-CN/ ...
- element-ui table 最后一行合计,单元格合并
接着写两个方法--最后一行合计的方法 --单元格合并的方法 先写一个rowspan方法,计算出spanArr数组是怎么单元格合并的,注意rowspan方法要在渲染完成之前使用,可以在mounted中使 ...
- 关于table动态添加数据 单元格合并 数组合并
var newArr = [ {"BranchID":1,"BranchName":"城二","BranchFullName&qu ...
- PHPWord中文乱码、单元格合并、动态表格模板解决方案合集
摘要: 最近一个项目开发要用到PHP技术导出Word文档,采用PHPWord插件,版本为0.6.2 beta,CodePlex已停止维护.网上还有另外一个版本的PhpWord,项目类名大小写上略有不 ...
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
- 修改TreeList单元格格式(实现类似单元格合并效果)
关键点:(1)TreeList中显示的单元格默认不显示上.下.左.右边框,显示的是TreeList自身的行横边框.列纵边框,具体对应TreeList属性中OptionView项下的ShowVertLi ...
- JTable 单元格合并 【转】
单元格合并 一.单元格合并.(1)我们可以使用Jtable的三个方法:getCellRect(),columnAtPoint(),and rowAtPoint().第一个方法返回一个单元格的边界(Re ...
- NPOI 教程 - 2.1单元格合并
来源:http://liyingchun343333.blog.163.com/blog/static/3579731620091018212990/ 合并单元格在制作表格时很有用,比如说表格的标题就 ...
随机推荐
- docker安装postgres并启用postgis扩展
镜像 查看所有镜像 docker images 可以直接拉取postgis镜像 docker pull postgis 也可以在已有镜像上安装postgres,再启用扩展: docker pull p ...
- Docker CLI docker buildx build 常用命令
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...
- Kubernetes-Pod进阶
目录: 资源限制 CPU资源单位 内存资源单位 重启策略 健康检查/探针 探针的三种规则 Probe支持三种检查方法 总结 Pod 进阶 资源限制 当定义 Pod 时可以选择性地为每个容器设定所需要的 ...
- windwos 系统打补丁后重启不了处理方案
如果可以进入WinRE这个修复的高级选项,选择安全模式,是否可以进入,卸载最近安装的补丁,再重启看一下. 如果无法进入安全模式的话,那么选择cmd模式,使用下方命令.这通常会回退pending的upd ...
- Virtualbox网络设置
记录一下https://ladybug.top/%E8%BD%AF%E4%BB%B6%E5%AE%89%E8%A3%85&%E9%85%8D%E7%BD%AE/complete-the-net ...
- ncnn 加载 bin文件时,出错 报异常 0xC0000094:Integer division by zero。
这次转yolov8.pt 到 onnx 到 ncnn,调用ncnn,加载bin文件时出错报异常 0xC0000094:Integer division by zero. 解决方式: 导出onnx时,加 ...
- history 添加 时间戳和ip,用户
vim /etc/profile 在文件最后加入 HISTFILESIZE=4000 # 默认保存命令是1000条,这里修改为4000条 HISTSIZE=4000 USER_IP=`who -u ...
- mysql and or优先级
and优先级高于or, 不使用()情形:or后仍遇到and时,先算and再算or select * from table1 where f1=1 and f2=2 or f3=3 and f4=4 o ...
- iptables(二)常用规则即操作示例
常用规则示例 修改chain默认策略 #filter表在INPUT chain默认策略为ACCEPT[root@iptables_host02 ~]# iptables -nvL INPUTChain ...
- Navie UI
开发文档 一个 Vue 3 组件库, 它比较完整,主题可调,用 TypeScript 写的,快.