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: '$ ...
随机推荐
- java如何生成 MD5?
java生成 MD5最简单方法 答: 复制以下方法即可使用,不用依赖任何第三方包 public static String MD5(String data) throws Exception { ...
- SpringBoot集成Spring MVC视图
SpringBoot在springmvc的视图解析器方面就默认集成了ContentNegotiatingViewResolver和BeanNameViewResolver,在视图引擎上就已经集成自动配 ...
- JS 时间处理(GMT转换,超24小时加一天,时间差计算)
计算天数,加小时,加分数 Date.prototype.Format = function (fmt) { // author: meizz var o = { "M+": thi ...
- MyBatis 的案例
首先我们需要先下载jar包 其次我们书写具体的内容 Student Class package entity; /* * 学生类 * */ public class Student { //学生编号 ...
- MODRD 指令 读取地址是哪儿来的
MODRD s1 s2 n 例如: MODRD K1 H2102 K2 (台达VFDM变频器) 读取变频器的主频率及输出频率,并存放于寄存器D1050,D1051指令中s2的数据地址是 ...
- .Net Core 精选公众号集合(保持更新)
dotNET跨平台 <dotNET跨平台>是国内首个以.NET程序员.技术文化.新闻为主题的公众号,拥有约5万读者.在这里你可以谈微软.NET,Mono的跨平台开发技术,也可以谈谈其他的跨 ...
- 【C/C++】缓冲区设计--环形队列
原文链接:http://blog.csdn.net/billow_zhang/article/details/4420789 在程序的两个模块间进行通讯的时候,缓冲区成为一个经常使用的机制. 如上图, ...
- TCP 客户端编程
1.Qt中TCP客户端编程 对Qt编程而言,网络只是数据传输的通道: Qt提供了QTcpSocket类(封装了TCP协议细节): 将QTcpSocket的对象当做黑盒使用,进行数据首发. 1.1QTc ...
- 乐字节Java|GC垃圾回收机制、package和import
本文接上一篇:乐字节Java|this关键字.static关键字.block块.本文是接着讲述JavaGC垃圾回收机制.package 和 import语句. 一.GC垃圾回收机制 GC全名:Garb ...
- 深度图转伪彩色图(python)
kinect得到的深度图灰不拉几,人眼很难识别出其中的物体,感知深度的变化. 在做展示的时候,我们往往需要可视化,使用OpenCV的预定义的颜色映射来将灰度图像伪彩色化,在OpenCV中使用apply ...