<el-table
v-loading="loading"
:data="tableData"
border
:span-method="colSpanMethod"
> </el-table>
//需要的合并效果:data
spanArrs: {
amount1: [], // 合并单元格的参数
amount2: []
}
    const amount2 = this.getSpanArr(tableData, 'amount2')
    const spanArrs = {
      // amount1:amount1,
      amount2: 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——可合并单元格的表格的更多相关文章

  1. 前端Excel表格导入导出,包括合并单元格,表格自定义样式等

    表格数据导入 读取导入Excel表格数据这里采用的是 xlsx 插件 npm i xlsx 读取excel需要通过 XLSX.read(data, {type: type}) 方法来实现,返回一个叫W ...

  2. react antd Table动态合并单元格

    示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...

  3. react ,ant Design UI中table组件合并单元格并展开详情的问题

    需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢?  单元格合并?  还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...

  4. css table之合并单元格

    colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...

  5. table JS合并单元格

    function _w_table_rowspan(_w_table_id,_w_table_colnum){ _w_table_firsttd = ""; _w_table_cu ...

  6. html table动态合并单元格 js方法

    <script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...

  7. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  8. 复杂的POI导出Excel表格(多行表头、合并单元格)

    poi导出excel有两种方式: 第一种:从无到有的创建整个excel,通过HSSFWorkbook,HSSFSheet HSSFCell, 等对象一步一步的创建出工作簿,sheet,和单元格,并添加 ...

  9. layui:数据表格如何合并单元格

    layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...

随机推荐

  1. java如何生成 MD5?

    java生成 MD5最简单方法   答: 复制以下方法即可使用,不用依赖任何第三方包 public static String MD5(String data) throws Exception { ...

  2. SpringBoot集成Spring MVC视图

    SpringBoot在springmvc的视图解析器方面就默认集成了ContentNegotiatingViewResolver和BeanNameViewResolver,在视图引擎上就已经集成自动配 ...

  3. JS 时间处理(GMT转换,超24小时加一天,时间差计算)

    计算天数,加小时,加分数 Date.prototype.Format = function (fmt) { // author: meizz var o = { "M+": thi ...

  4. MyBatis 的案例

    首先我们需要先下载jar包 其次我们书写具体的内容 Student  Class package entity; /* * 学生类 * */ public class Student { //学生编号 ...

  5. MODRD 指令 读取地址是哪儿来的

    MODRD  s1  s2 n  例如: MODRD K1 H2102 K2    (台达VFDM变频器)   读取变频器的主频率及输出频率,并存放于寄存器D1050,D1051指令中s2的数据地址是 ...

  6. .Net Core 精选公众号集合(保持更新)

    dotNET跨平台 <dotNET跨平台>是国内首个以.NET程序员.技术文化.新闻为主题的公众号,拥有约5万读者.在这里你可以谈微软.NET,Mono的跨平台开发技术,也可以谈谈其他的跨 ...

  7. 【C/C++】缓冲区设计--环形队列

    原文链接:http://blog.csdn.net/billow_zhang/article/details/4420789 在程序的两个模块间进行通讯的时候,缓冲区成为一个经常使用的机制. 如上图, ...

  8. TCP 客户端编程

    1.Qt中TCP客户端编程 对Qt编程而言,网络只是数据传输的通道: Qt提供了QTcpSocket类(封装了TCP协议细节): 将QTcpSocket的对象当做黑盒使用,进行数据首发. 1.1QTc ...

  9. 乐字节Java|GC垃圾回收机制、package和import

    本文接上一篇:乐字节Java|this关键字.static关键字.block块.本文是接着讲述JavaGC垃圾回收机制.package 和 import语句. 一.GC垃圾回收机制 GC全名:Garb ...

  10. 深度图转伪彩色图(python)

    kinect得到的深度图灰不拉几,人眼很难识别出其中的物体,感知深度的变化. 在做展示的时候,我们往往需要可视化,使用OpenCV的预定义的颜色映射来将灰度图像伪彩色化,在OpenCV中使用apply ...