<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. web自动化-selenium+Chrome驱动国内下载地址+驱动对应Chrome版本号

    selenium各版本下载地址 http://selenium-release.storage.googleapis.com/index.html 国内下载:http://npm.taobao.org ...

  2. Redis高级功能 - 慢查询日志

    转自 https://segmentfault.com/a/1190000009915519

  3. java书籍推荐转

    http://blog.csdn.net/chaozhi_guo/article/details/51274634 一.<深入理解Java虚拟机:JVM高级特性与最佳实践> 如果你不满足于 ...

  4. 居里先生的猜想 | 皮埃尔·居里诞辰160周年

    皮埃尔·居里(Pierre Curie)先生坐在桌前,手里把玩着一块小磁铁.忽然,一道闪念跃入脑海,他为自己这个大胆的想法激动不已,忍不住伏案疾笔书写起来.不远处,一位安静的青年女子温情脉脉地注视着他 ...

  5. java基本思想

    面向对象 众所周知,面向对象编程思想是java的基本思想.java的整个体系和技术实现都是以这个思想为基础.(这个通过类和接口能看出来,后面提到) 对这个事情的认知度甚至变成了很多公司的面试标准.比如 ...

  6. Zuul1与Spring Cloud Gateway对比

    一.API网关 1.1 Zuul1简介 1.2 Spring Cloud Gateway简介 二.对比 2.0 产品对比 2.1 性能对比 2.1.1 低并发场景 2.1.2 高并发场景 2.1.3 ...

  7. element-ui中的表格嵌套表格

    element-ui中有详细的各种表格及表格方法.也有表格展开出现二级的样式,但是却没有表格嵌套二级表格的方案,于是就自己写了一个,样式图如下: 展开后如下 这就是一个普通的二级表格嵌套,用的是el- ...

  8. cent8安装postgres

    postgres是一款免费.开源的对象型关系数据库,其在cent8的安装方式与cent7的不太一样,特此记录. 步骤: 1 安装postgres server dnf install postgres ...

  9. Fiddler之手机抓包

    1.Fiddle设置端口,Tools->Options->Connections, 2.手机设置代理服务器: 注意:要保证手机和PC电脑IP在同一个网段(或者同一个网关) (1).安卓手机 ...

  10. Python 【文件的读写】

    文件读写 A 读取文件 读文件三步:开——读——关.file1 = open('/Users/Ted/Desktop/test/abc.txt','r',encoding='utf-8')第一个参数是 ...