element实现合并单元格通用方法

主要思路:

  1. 对数据进行处理,写了一个getSpanData通用方法。
  2. 用api中提供的span-method方法。

span-method方法用法:

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

通用实例

demo.vue

  <el-table
   v-loading="loading"
   ref="singleTable"
   :data="tableData"
   :span-method="handleObjectSpanMethod"
   highlight-current-row
   border
   style="width: 100%;margin-top:10px;"
   max-height="730"
  >

JavaScript

 // 查询列表
 queryTableList() {
  getNeeds().then(res => {
   if (res.code === 0) {
   // 表格数据
    this.tableData = res.data
    // 对表格数据进行处理,找出需要合并的单元格
    this.getSpanData(this.tableData)
   }
  })
 },
// 计算需要合并的单元格
getSpanData(data) {
 // 存放计算好的合并单元格的规则
 this.spanData = []
 for (var i = 0; i < data.length; i++) {
  if (i === 0) {
   this.spanData.push(1)
   this.pos = 0
  } else {
   // 判断当前元素与上一个元素是否相同
   if (data[i].realOpenDate === data[i - 1].realOpenDate) {
    this.spanData[this.pos] += 1
    this.spanData.push(0)
   } else {
    this.spanData.push(1)
    this.pos = i
   }
  }
 }
}
// 合并单元格
handleObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
 // 需要合并的列
 // [0, 1, 2].includes(columnIndex ), 表示合并前三列
 if (columnIndex === 1) {
  const _row = this.spanData[rowIndex]
  const _col = _row > 0 ? 1 : 0
  return {
   rowspan: _row,
   colspan: _col
  }
 }
}

getSpanData中spanData处理后的结构:

数组中12的值表示需要合并的地方,很好理解,就是找到每行中columnIndex对应要合并的位置。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • element-ui中Table表格省市区合并单元格的方法实现

    本文介绍了element-ui中Table表格省市区合并单元格的方法实现,分享给大家,具体如下: 效果如图 代码如下: <template> <div> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="搜索"> <el-input v-mod

  • element实现合并单元格通用方法

    主要思路: 对数据进行处理,写了一个getSpanData通用方法. 用api中提供的span-method方法. span-method方法用法: 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当前行号rowIndex.当前列号columnIndex四个属性.该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan. 也可以返回一个键名为rowspan和colspan的对

  • JS实现动态修改table及合并单元格的方法示例

    本文实例讲述了JS实现动态修改table及合并单元格的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-

  • 在python中使用xlrd获取合并单元格的方法

    处理excel表格的时候经常遇到合并单元格的情况,使用xlrd中的merged_cells的方法可以获取当前文档中的所有合并单元格的位置信息. import xlrd xls = xlrd.open_workbook('test.xls') sh = xls.sheet_by_index(0) 读取excel并读取第一页的内容. for crange in sh.merged_cells: rs, re, cs, ce = crange merged_cells返回的是一个列表,每一个元素是合并

  • Java中EasyPoi导出复杂合并单元格的方法

    前言: 上星期做了一个Excel的单元格合并,用的是EasyPoi,我之前合并单元格都是原生的,第一次使用EasyPoi合并也不太熟悉,看着网上自己套用,使用后发现比原生的方便些,贡献一下,也给其他用到合并而且用的是EasyPoi的小伙伴节省下时间. 导出模板: 坐标: 版本号,自己来定,可以去官网查看:EasyPoi官网 <!-- easypoi 导入包 --> <dependency> <groupId>cn.afterturn</groupId> &l

  • Java导出Excel统计报表合并单元格的方法详解

    目录 前言 示例 注意事项 总结 前言 Apache POI是一种流行的API,允许程序员使用Java程序创建,修改和显示MS Office文件. 它是由Apache Software Foundation开发和分发的开源库,用于使用Java程序设计或修改Microsoft Office文件. 它包含将用户输入数据或文件解码为MS Office文档的类和方法. HSSF - 用于读取和写入MS-Excel文件的xls格式 示例 类似上面的需要合并表头的报表在日常的开发中也是经常遇到,这里总结下关

  • jquery miniui 教程 表格控件 合并单元格应用

    表格:合并单元格 参考示例:合并单元格 调用方法:margeCells.如下代码: 复制代码 代码如下: grid.on("load", onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 }, { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3

  • Python基于xlrd模块处理合并单元格

    目的: python能使用xlrd模块实现对Excel数据的读取,且按照想要的输出形式. 总体思路: (1)要想实现对Excel数据的读取,需要用到第三方应用,直接应用. (2)实际操作时候和我们实际平时打开一个文件进行操作一样,先找到文件-->打开文件-->定义要读取的sheet-->读取出内容. Excel处理合并单元格: 已存在合并单元格如下: xlrd中的 merged_cells 属性介绍:[code]import xlrd import xlrd workbook = xlr

  • PHPExcel合并与拆分单元格的方法

    本文实例讲述了PHPExcel合并与拆分单元格的方法.分享给大家供大家参考,具体如下: $objPHPExcel; $filepath="c:\temp.xlsx"; try { $objReader = PHPExcel_IOFactory::createReader('Excel2007'); $objPHPExcel = $objReader->load($filepath); } catch (Exception $e) { die(); } $column_index

  • jquery 动态合并单元格的实现方法

    如下所示: ////在table的第二行的位置添加一行: var tbl_elm = $("#dgList"); $('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .Tab

随机推荐