近期做项目有合并单元格的案例,所以简单的解释如下

分为两部分一部分为头部的合并另一部分为表体的合并

表头的合并 

首先要知道 header-cell-style 这个合并头部的方法

解释如下:

b

包括四个参数分别是 row column rowIndex columnIndex 

row column 行 列 rowIndex 行下标  columnIndex列下标

下标可以参考下面这张图~

实现方法:

 disCountHeader({ row, column, rowIndex, columnIndex }) {
	console.log(row, column, rowIndex, columnIndex)
	if(rowIndex == 1 || rowIndex == 2){
	 return { display:"none" }
	}
},

 当rowIndex为1或者2时进行隐藏掉 就合并头部具体的可以按照情况去判断

表体的合并

 和表头合并原理一样

span-method

 

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

按照条件判断 return 一个数组[ 1,2]  <==>rowspan: 1,colspan: 2     合并 1行2列  enen~~~~

简单的实例可以参考:https://blog.csdn.net/weixin_41472431/article/details/110935366

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐