el-table——可合并单元格的表格
<el-table
v-loading="loading"
:data="tableData"
border
:span-method="colSpanMethod"
> </el-table>
//需要的合并效果:data
spanArrs: {
amount1: [], // 合并单元格的参数
amount2: []
}
// 合并列函数:methods
colSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (this.spanArrs[column.property] && columnIndex < 1) { //
const _row = this.spanArrs[column.property][rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
},
// 计算合并个数:key代表需要合并的参数
getSpanArr (data, key) {
let spanArr = []
let spanIndex = null
if (data == null) {
return []
} else {
for (let i = 0; i < data.length; i++) {
if (i === 0) {
spanArr.push(1)
spanIndex = 0
} else {
if (data[i][key] === data[i - 1][key]) {
spanArr[spanIndex] += 1
spanArr.push(0)
} else {
spanArr.push(1)
spanIndex = i
}
}
}
return spanArr
}
},
// 排序:可以让后台返回排序后的内容,避免合并后内容不对应
sortBy (attr, rev) {
if (!rev) {
rev = 1
} else {
rev = (rev) ? 1 : -1
}
return function (a, b) {
a = a[attr].toLowerCase()
b = b[attr].toLowerCase()
if (a < b) {
return rev * -1
}
if (a > b) {
return rev * 1
}
return 0
}
},
el-table——可合并单元格的表格的更多相关文章
- 前端Excel表格导入导出,包括合并单元格,表格自定义样式等
表格数据导入 读取导入Excel表格数据这里采用的是 xlsx 插件 npm i xlsx 读取excel需要通过 XLSX.read(data, {type: type}) 方法来实现,返回一个叫W ...
- react antd Table动态合并单元格
示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- css table之合并单元格
colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...
- table JS合并单元格
function _w_table_rowspan(_w_table_id,_w_table_colnum){ _w_table_firsttd = ""; _w_table_cu ...
- html table动态合并单元格 js方法
<script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- 复杂的POI导出Excel表格(多行表头、合并单元格)
poi导出excel有两种方式: 第一种:从无到有的创建整个excel,通过HSSFWorkbook,HSSFSheet HSSFCell, 等对象一步一步的创建出工作簿,sheet,和单元格,并添加 ...
- layui:数据表格如何合并单元格
layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...
随机推荐
- SSM基于Token的登录认证
1.什么是token token的意思是“令牌”,是服务端生成的一串字符串,作为客户端进行请求的一个标识. 当用户第一次登录后,服务器生成一个token并将此token返回给客户端,以后客户端只需带上 ...
- jmeter 分布式配置(含参数化问题)
这次用的是 jmeter 5.1.1 jdk8 调度机: 修改bin目录下jmeter.properties文件 第258行 remote_hosts=192.168.87.34:1856,192. ...
- php关于文件上传的两个配置项说明
; Maximum allowed size for uploaded files.; http://php.net/upload-max-filesizeupload_max_filesize = ...
- 树形DP入门学习
这里是学习韦神的6道入门树形dp进行入门,本来应放在day12&&13里,但感觉这个应该单独放出来好点. 这里大部分题目都是参考的韦神的思想. A - Anniversary part ...
- 【Leetcode_easy】645. Set Mismatch
problem 645. Set Mismatch 题意: solution1: 统计每个数字出现的次数了,然后再遍历次数数组,如果某个数字出现了两次就是重复数,如果出现了0次,就是缺失数. 注意:如 ...
- Jira内存调整
java的metaspce怎么调大 元空间虚拟机控制元空间的增长.但是有些时候我们想限制其增长,比如通过显式在命令行中设置-XX:MaxMetaspaceSize.默认情况下,-XX:MaxMetas ...
- FAQ and discussed with adam
1. About permuter index. url: https://www.youtube.com/watch?v=j789k96g5aQ&list=PL0ZVw5-GryEkGAQ ...
- Linux软件安装管理---源码安装
在Linux平台下,软件包的类型可以划分为两类:源码包.二进制包. 源码包: 即程序软件的源代码(一般也叫Tarball,即将软件的源码以tar打包后再压缩的资源包). 二进制包: 如 Red Hat ...
- Openssl 加解密文件
使用openssl 的命令行进行文件的加密与解密过程,主要有两种方式: openssl 指定加密/解密算法加密 openssl 指定公钥/私钥文件加密 openssl 指定加密/解密算法加密 To E ...
- Redis 常用命令学习二:字符串类型命令
1.赋值与取值命令 127.0.0.1:6379> set foo helloredis OK 127.0.0.1:6379> get foo "helloredis" ...