vue单元格多列合并的实现

一.多列合并

1.在el-table中添加:span-method="objectSpanMethod"属性来控制合并单元格，如下图

2.合并代码，每一列都要设置一个不同的key，这样可以防止合并的时候上下内容一样导致错误的问题

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {
    if (this.myObj[row.channel_type].start === rowIndex) {
     return {
      rowspan: this.myObj[row.channel_type].step,
      colspan: 1
     };
    } else {
     return {
      rowspan: 0,
      colspan: 0
     };
    }
   }
   if (columnIndex === 1) {
    if (
     this.myObj_two[row.channel_name_chinese + row.channel_type].start ===
     rowIndex
    ) {
     return {
      rowspan: this.myObj_two[row.channel_name_chinese + row.channel_type]
       .step,
      colspan: 1
     };
    } else {
     return {
      rowspan: 0,
      colspan: 0
     };
    }
   }
  },
   // 合并单元格第一列
  resolveData(arr) {
   var obj = {};
   arr.forEach((val, key) => {
    if (!obj[val.channel_type]) {
     obj[val.channel_type] = {
      start: key,
      step: 1
     };
    } else {
     obj[val.channel_type].step++;
    }
   });
   this.myObj = obj;
   console.log(obj);
  },
  // 合并单元格第二列
  resolveData_two(arr) {
   var obj = {};
   arr.forEach((val, key) => {
    if (!obj[val.channel_name_chinese + val.channel_type]) {
     obj[val.channel_name_chinese + val.channel_type] = {
      start: key,
      step: 1
     };
    } else {
     obj[val.channel_name_chinese + val.channel_type].step++;
    }
   });
   this.myObj_two = obj;
   console.log(this.myObj_two, "this.myObj");
  },

3.需要调用一下下面两个函数，data为你所获取的所有数据

 this.resolveData_two(data);
     this.resolveData(data);

4.合并结果如下图

到此这篇关于vue单元格多列合并的实现的文章就介绍到这了,更多相关vue单元格多列合并内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue动态合并单元格并添加小计合计功能示例

    vue动态合并单元格并添加小计合计功能示例

    1.效果图 2.后台返回数据格式(平铺式) 3.后台返回数据后,整理所需要展示的属性存储到(items)数组内 var obj = { "id": curItems[i].id, "feeName": curItems[i].feeName, "projectName": curItems[i].projectName, "projectDetailsName": curItems[i].projectDetailsName,

  • vue 中 elment-ui table合并上下两行相同数据单元格

    vue 中 elment-ui table合并上下两行相同数据单元格

    html : <el-table :header-cell-style="{background:'#6d7f93',color:'white'}" :data="ptableDate" align="center" border v-loading="loading" :height="tableHeight" :span-method="objectOneMethod" >

  • antd vue table跨行合并单元格,并且自定义内容实例

    ant-design-vue版本:~1.3.8 需求:表格实现跨行合并,并且在合并完的单元格中显示图片 效果图: 源码: export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex: 'confidence ', cla

  • vue单元格多列合并的实现

    vue单元格多列合并的实现

    一.多列合并 1.在el-table中添加:span-method="objectSpanMethod"属性来控制合并单元格,如下图 2.合并代码,每一列都要设置一个不同的key,这样可以防止合并的时候上下内容一样导致错误的问题 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (this.myObj[row.channel_type].start === row

  • PHP使用PHPExcel删除Excel单元格指定列的方法

    PHP使用PHPExcel删除Excel单元格指定列的方法

    本文实例讲述了PHP使用PHPExcel删除Excel单元格指定列的方法.分享给大家供大家参考,具体如下: 需求是这样的: 有一个系统仅公司内部和外部经销商使用,在一个导出功能中公司内部员工跟外部经销商导出的列是不一样的(某些数据是不能提供给经销商的) 因为导出的数据都是一样的(某些列外数据外部没有)因此并没有单独处理,而是统一生成然后根据不同的账户再删除没有权限的列 /** * @Author: HTL * @Description: 移出单元列 * @objPHPExcel: phpexec

  • 基于jQuery的合并表格中相同文本的相邻单元格的代码

    ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 广州 00027 白花油               广东 广州 00028 红花油               广东 深圳 00028 红花油               广东

  • python之DataFrame实现excel合并单元格

    在工作中经常遇到需要将数据输出到excel,且需要对其中一些单元格进行合并,比如如下表表格,需要根据A列的值,合并B.C列的对应单元格 pandas中的to_excel方法只能对索引进行合并,而xlsxwriter中,虽然提供有merge_range方法,但是这只是一个和基础的方法,每次都需要编写繁琐的测试才能最终调好,而且不能很好的重用.所以想自己写一个方法,结合dataframe和merge_range.大概思路是: 1.定义一个MY_DataFrame类,继承DataFrame类,这样能很

  • 使用jQuery 操作table 完成单元格合并的实例

    比较表格的内容.判断是否合并单元格: tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格,需要存储两个参数, * 1,开始合并的单元格的第一行的行数, * 2.要合并的单元格的个数 **/ console.log(tr); //判断 若只有一行数据,则不做调整 if(tr <= 2){ }else{ //var i=1 比

  • python使用openpyxl读取合并单元格的值

    python使用openpyxl读取合并单元格的值

    目录 问题: 解决思路: 问题: 假设在test.xlsx的"Sheet1"工作表中,A1:D3区域的值如下: 要求给定指定的行.列以及对应的工作表作为参数,能够正确解析合并单元格,获取指定单元格的值. 如果直接根据行列获取对应单元格的值,则合并单元格非左上角的其他单元格都会获取到None值,如下: if __name__ == "__main__": wb = xl.load_workbook("test.xlsx") sheet_ = wb[

  • Python excel合并居中值相同的单元格实例代码

    Python excel合并居中值相同的单元格实例代码

    目录 前言 处理前的单元格 代码分解讲解 总结 前言 这里要说明一下,本文包含的代码其中一部分并不是自己写的,是我找了很多文章拼凑出来的,比如如何找相同内容的单元格.怎么合并.怎么居中等等.出处许多,这边就不一个个放链接了.就当做一份自己写的学习笔记供大家参考. 本文结构 是分段讲解代码,文末放全部的代码 处理前的单元格   -----------------------> 可以看到有一些名字是重复的,我们现在要做的就是把这些重复的名字合并居中,程序执行完的效果如图. (大家可能会说,这不是多此

  • Java利用EasyExcel实现合并单元格

    Java利用EasyExcel实现合并单元格

    目录 pom版本 1.自定义合并单元格 1.1 不合并单元格 1.2 合并单元格 1.3 写多个sheet 1.4 WriteTable pom版本 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.2.7</version> </dependency> 1.自定义合并单元格 在某些

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

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

  • .NET读写Excel工具Spire.Xls使用 Excel单元格控制(3)

    .NET读写Excel工具Spire.Xls使用 Excel单元格控制(3)

    前一篇文章:" .NET读写Excel工具Spire.Xls使用(2)Excel文件的控制"给大家介绍了C#使用Spire.XLS来控制Excel文件的基本功能和相关实践代码.这篇文章将重点介绍C#操作Excel文件时,对Excel单元格的控制. 以前在使用NPOI的时候,其实印象最深的还是单元格的操作,因为以前使用NPOI的主要任务是生成一个复杂的统计报表,不仅表头比较复杂,而且行类别的控制也比较复杂,不是固定的,要动态的进行.并且不同单元格的边框还不一样,所以当初使用 NPOI 也

随机推荐