背景


最近基本上都是以Vue来构建项目,而UI框架也基本上都是使用的element-ui,所以里面组件用的也是越来越多,今天想记录的是非常非常小的一个属性的用法。

Table组件


Table组件用了真的太多次了,里面各种属性也基本上都用过了,今天就又用到了一个属性:span-method

官方介绍:

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

也给了示例,截取其中的代码:

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}

这里以行合并为例:

就这么看这个例子,结合文档说明,说能看明白吧,还是有一部分人看不明白的(我就属于没看明白的这一类)。

但是,如果加上一行注释,非常简短的注释,那真的是再明白不过的了。

if (rowIndex % 2 === 0) { // 用于设置合并开始的行号

关键点在于这个if判断仅仅是需要找到合并开始的行,而不需要我们找到合并在一起的所有行。

只要找到开始合并的行,在返回值当中,返回合并的行的数量,并且利用最后一个else,返回return {rowspan: 0, colspan: 0},就能够完成我们合并行的需求。

看一个具体的例子,加上注释:

if (columnIndex === 0) {
if (rowIndex === 0) { // 合并第一行到第四行,从第一行开始,共4行
return {
rowspan: 4,
colspan: 1
}
} else if (rowIndex === 4) { // 合并第五行到第九行,从第五行开始,共5行
return {
rowspan: 5,
colspan: 1
}
} else if (rowIndex === 9) { // 合并第10行到第14行,从第10行开始,共5行
return {
rowspan: 5,
colspan: 1
}
} else { // 其余被合并的行,诸如1、2、3、5、6、7、8、10、11、12、13全都设为0
return {
rowspan: 0,
colspan: 0
}
}
}

是不是明白多了。说白了,这个方法中if所要判断的是仅仅是从哪一行开始合并,然和返回结果为合并多少行、多少列

element-ui当中table组件的合并行和列的属性:span-method的用法的更多相关文章

  1. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  2. react ,ant Design UI中table组件合并单元格并展开详情的问题

    需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢?  单元格合并?  还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...

  3. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  4. 09 - Vue3 UI Framework - Table 组件

    接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 ...

  5. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  6. table 合并行和列

    table合并行列,以及拆分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  7. 【C#】Excel导出合并行和列并动态加载行与列

    简单的Excel导出比较好做,只要设置表头,循环在表格中赋值添加数据即可,但是如果表头是不固定的,并且个数是不确定的,这就需要根据查询出数据的特点来添加导出了. 导出效果图: 如上图所示,商品的个数是 ...

  8. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  9. element ui表格相同内容自动合并

    一开始觉得合并单元格很困难,什么鬼,后来仔细查看api,发现是可以实现的,特此记录下,直接看代码, 项目需求是第一列和第二列还有第16列需要相同内容进行合并,所以判断条件是不同的: 实现后效果如下: ...

随机推荐

  1. legend3---lavarel常用操作代码2

    legend3---lavarel常用操作代码2 一.总结 一句话总结: 对于王思cong被执法人的感悟:失意时 莫心伤,得意时 莫膨胀 1.lavarel自动事务? DB::transaction方 ...

  2. vsCode多选多个元素进行统一修改

    如果你没有修改过vsCode的快捷键那么你可以按住"ctrl+d",然后逐个选中你要修改的元素,选完之后松开,你就可以敲击键盘愉快的修改了...如果你使用了ecliplse快捷键插 ...

  3. 008-网络抓包工具-wireshark

    一.概述 二.安装 三.使用 3.1.基础设置 语言:WireShark→首选项→语言 3.2.使用过程 打开软件,选择对应的网卡, Filter:设置对应的关键词后,点击回车或者右侧箭头 如,协议: ...

  4. C++ unique

    #include <iostream>#include <algorithm>#include <list>#include <iterator>#in ...

  5. MySQL 查询某个数据库中所有包含数据记录的表名

    MySQL 查询某个数据库中所有包含数据记录的表名 有时根据实际应用需要,需要对数据进行备份. 如果一个数据库中有很多数据表,但是只想备份包含数据记录的那些表数据(空表不做数据备份). 如果通过如下S ...

  6. Nonce

    Nonce是或Number once的缩写,在密码学中Nonce是一个只被使用一次的任意或非重复的随机数值. 在加密技术中的初始向量和加密散列函数都发挥着重要作用,在各类验证协议的通信应用中确保验证信 ...

  7. 如何调试JS查看异常信息

    如果页面上有错误,html页面的控制台会报错,可以查看报错信息,找到对应的行,找到出错的位置.也可以通过editplus运行调试,editplus会以弹框的形式出现提示,哪行的什么位置什么错误,需要记 ...

  8. oracle数据库可视化工具

    1.TreeSoft基于web网页方式,管理维护oracle数据,功能包括:SQL在线执行,数据在线维护管理,数据导出,数据交换同步等. 支持MySQL,Oracle,DB2,PostgreSQL,S ...

  9. 【手记】解决Graphics.DrawImage带ImageAttributes在XP报内存不足的问题

    异常信息: System.OutOfMemoryException: 内存不足. 在 System.Drawing.Graphics.CheckErrorStatus(Int32 status) 在 ...

  10. 牛客竞赛(gcd,快速幂)

    一.最大公约数和最小公倍数问题 题目描述: 输入2个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数. 条件:1.P, ...