需求,对指定的列表展示进行合并单元格,循环展示指定行和指定列。

1.官方文档

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。

1.2.两种返回方法

其实就是两种返回值的形式,本文章只用数组形式的返回举例:

methods: {      arraySpanMethod({ row, column, rowIndex, columnIndex }) {        //如果当前是第一行。因为下标从0开始,所以第一行的下标能被整除。        if (rowIndex % 2 === 0) {          //如果当前列是第一行第一列,合并1行,和2列          if (columnIndex === 0) {            return [1, 2];          } else if (columnIndex === 1) {            //如果当前列是第一行第二列,把值清除。注意,不清除的话,值会在后面一列展示,影响布局。            return [0, 0];          }        }      },}

数组第一个元素代表rowspan(要合并的行数),第二个元素代表colspan(要合并的列数)

1.3 四个传入参数

该方法接收四个传入参数,当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。这4个属性对我们定制化合并单元格很有帮助。要注意的是,行号和列号都是从0开始网上递增的。

1.4深入理解返回值的意义

想要做好合并,首先我们要理解如何合并,以及合并后的数据是如何进行处理的。以数组为例,Element接收第一个参数rowspan和第二个参数colspan,然后根据返回的值进行合并。

如图,如果想将左边的列合并单元格成右边的列,那么只需要在数组中返回return [1,2]就行了,表示合并一行两列。
代码如下:

methods: {      arraySpanMethod({ row, column, rowIndex, columnIndex }) {        //如果是第一列        if (columnIndex === 0||columnIndex ===1) {          //如果当前单元格是第一列和第二列的第一行,进行向下合并单元格              if (rowIndex % 2 === 0) {                  return [1, 2];              }else {                  //如果当前单元格是第一列和第二列的第二行,值置空(不置空则重复值会存在并向后一行展示,影响布局)                  return [0, 0];              }        }      },}

1.5为什么需要置空操作以及不需要合并的单元格需要控制吗?

先回答后面一个问题,不需要合并操作的单元格不用控制,return[1,1]这种操作不需要。因为单元格就是原子的,是代码控制的最小单位。
置空操作则需要反推下:如果不置空的话有什么影响?

(图片仅作示意,并非真实情况。)
首先我们要知道,当我们合并单元格时,系统并不会把两个单元格的值拼接在一个单元格里。而是会取第一个单元格的值。
Element在操作单元格时,也是取第一个单元格的值,但是不会将第二个单元格的值置空,这就会导致如上图的情况。即,合并是成功了,多出的值没有做处理。
因此,我们需要手动处理,定位到被合并的行或者列,将其值置为空,即返回[0,0]。

2 注意事项

2.1:当我们使用置空操作时一定要注意范围问题,避免不小心,将其他的无辜的值也给置空了。举例如下

methods: {      arraySpanMethod({ row, column, rowIndex, columnIndex }) {        //如果是第一列        if (columnIndex === 0||columnIndex ===1) {          //如果当前单元格是第一列和第二列的第一行,进行向下合并单元格              if (rowIndex % 2 === 0) {                  return [1, 2];              }        }else {                  //错误操作                  return [0, 0];        }      },}

可以看到,如果像上面那样进行返回,那么除了第一列和第二列,所有的单元格都会被置空。布局突然错乱,可能就是作用域有问题,要认真检查。

2.2 巧用%进行换行合并操作
使用取余函数,可以帮我们确定要操作的行和列,对合并单元格非常有用。

2.3 使用填充法进行不规则表格填充
当我们每个第二行需要自定义表头时,可以将值定位固定值,利用合并单元格的特性,删除重复的固定值。即可进行不规则填充,如下图。

当然,如果是需要小计功能,有单独的方法,我这个只针对自定义第二行的表头。

asp单元格合并后宽度没有合并_ElementUI Table组件如何使用合并行或列功能深入解析...相关推荐

  1. bootstrap table 合并行_ElementUI Table组件如何使用合并行或列功能深入解析

    需求,对指定的列表展示进行合并单元格,循环展示指定行和指定列. 1.官方文档 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列col ...

  2. hssfworkbook 单元格合并后宽度不生效_Excel表格“假”合并,有多牛?

    在Excel表格中,你可以把多个单元格合并成一个单元格: 合并单元格只会保留左上角的单元格内容,为了证明这一点,你可以取消合并. 正是合并单元格这个只保留一个的特点,造成了表格后续的很多麻烦. 表格无 ...

  3. hssfworkbook 单元格合并后宽度不生效_一起来学习Excel批量合并单元格的操作技巧...

    在我们日常工作中,利用Excel制作表格时,合并单元格是一个让人又爱又恨的东西,合并单元格后的数据处理会带来很多麻烦,比如求和.统计等计算工作(可查阅<让我们一起来干掉Excel合并单元格的那些 ...

  4. 【excel】合并单元格拆分后每一格都填充为与原来相同内容

    用的比较频繁的一个操作,单元格合并拆分出的单元格自动填充为合并前内容 比较烦合并单元格,记得以前看过一本excel书里把合并单元格列为一大恶习,因为这严重影响数据分析,但那本书没说怎么处理,导致我才学 ...

  5. 表格控件DHTMLX Spreadsheet 5.0版本重大更新,新增搜索和过滤数据、合并单元格、自动宽度功能

    DHTMLX Spreadsheet是用纯JavaScript编写的开源电子表格小部件,可让您快速在网页上添加类似于Excel的可编辑数据表.高度可定制的JavaScript电子表格组件,具有优雅的M ...

  6. xlwings 合并单元格 读取_将16家公司财务报表数据过入合并底稿表格,我只用了1分钟...

    大家好,我是刀哥.如果你是一家集团公司的财务人员,合并报表由你来做,或者你是这家集团公司外聘的独立审计师,需要你定期编制合并底稿.出具审计报告,而集团公司有多家分子公司,可能十几家,甚至几十家上百家. ...

  7. html 单元格被撑开_表格单元格td设置宽度无效始终有内部的内容撑开

    摘要:这篇HTML栏目下的"表格单元格td设置宽度无效始终有内部的内容撑开",介绍的技术点是"表格单元格.设置宽度.宽度无效.单元格.单元.设置",希望对大家开 ...

  8. asp单元格合并后宽度没有合并_宅在家里跟着大牛从零开始学excel第五课-合并,边框,列宽行高...

    接着上一课,我们制作的课程表,有人说了不好看,确实,我们就来补充和美化一下.首先我们要更改的就是字体,字体改成下图,字体大小选为18,样子就好看了很多了. 仔细看上图,还却一点东西,那就是左边没有分上 ...

  9. EasyExcel:利用模板进行填充字段,生成公式处理,监听单元格填充后触发事件,相同日期单元格合并

    EasyExcel EasyExcel是一个基于Java的简单.省内存的读写Excel的开源项目.在尽可能节约内存的情况下支持读写百M的Excel. github地址:https://github.c ...

最新文章

  1. Python之路【第二篇】:Python基础(一)
  2. 为Android应用程序添加社会化分享功能
  3. 深入分析Cocos2d-x 2.0中的“纹理”和精灵-沈大海cocos2d-x教程20
  4. BackgroundWorker 简单使用教程 多个线程的创建
  5. CISSP考试经验分享
  6. 前端如何播放m3u8格式的视频
  7. 【室内/外设计】天正T20V3.0软件安装教程
  8. html+css实现自定义图片上传按钮
  9. HDU-不定积分-求一条直线与抛物线所围成的面积
  10. Win10 如何在系统内用cmd命令查看系统详细信息
  11. 2021年大厂iOS 面试题 - 前篇
  12. android高德地图用地址获取经纬度,高德地图API-获取位置信息的经纬度
  13. PIC16F877A与Proteus仿真-PIC16F877A最小系统及开发环境搭建
  14. 我爱赚钱吧:学生都可以做的兼职工作
  15. 个人征信报告解析(机构版)
  16. SSD模型(论文大致内容)
  17. 苹果新一代iPad Pro规格配置怎样?
  18. HTML5期末大作业:商城页面——仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成...
  19. 【文件编码转换】将GBK编码项目转为UTF-8编码项目
  20. HTTP 304状态码的详细讲解

热门文章

  1. 092_元素的几种宽度和高度
  2. 009-Joran配置框架
  3. unsigned char对应java_Java的数据类型,怎么就没有uchar呢
  4. 关于使用ajax给全局变量赋值失败的问题
  5. php实现单选和多选功能,input:checkbox多选框实现单选效果跟radio一样
  6. ds28e01完全数据手册_如何借助《活动管理手册》搭建营销体系?(内含课件PPT)...
  7. 大朗机器人餐厅在哪里_东莞餐厅惊现机器人服务员 平均每个10万元
  8. Android中利用隐式意图发送短信
  9. Git常用命令和Git团队使用规范指南
  10. sql group by having用法_神奇的 SQL,Group By 真扎心,原来是这样!