<vxe-table
@cell-click="handleClickCell"
:span-method="spanMethods" //自动合并单元格
:data="tableData2"> </vxe-table> spanMethods({row, $rowIndex, column, data}){
let fields = ["clothtktno", "contactno"]
let cellValue = row[column.property]
if (cellValue && fields.includes(column.property)) {
let prevRow = data[$rowIndex - 1]
let nextRow = data[$rowIndex + 1]
if (prevRow && prevRow[column.property] === cellValue) {
return {rowspan: 0, colspan: 0}
} else {
let countRowspan = 1
while (nextRow && nextRow[column.property] === cellValue) {
nextRow = data[++countRowspan + $rowIndex]
}
if (countRowspan > 1) {
return {rowspan: countRowspan, colspan: 1}
}
}
} },
  

  

vxe-table 合并单元格的更多相关文章

  1. css table 合并单元格

    1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...

  2. table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  3. table合并单元格

    table合并单元格 新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. ant design Table合并单元格合并单元格怎么用?

    1.ant design table合并单元格怎么用?

  5. BootStrap Table 合并单元格

    为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...

  6. 一种HTML table合并单元格的思路

    /** * 合并单元格 * @param table1 表格的ID * @param startRow 起始行 * @param col 合并的列号,对第几列进行合并(从0开始).如果传下来为0就是从 ...

  7. table合并单元格colspan和rowspan .

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  8. JQuery Table 合并单元格-解决Bug版本

    网络中提供的方法是: <script type="text/javascript"> function _w_table_rowspan(_w_table_id, _w ...

  9. table合并单元格 colspan(跨列)和rowspan(跨行)

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  10. Html table 合并单元格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. java方法的笔记

    方法 方法的概念 方法(method)是将具有独立功能的代码块组织成为一个整体,使其具有特殊功能的代码集 注意: 方法必须先创建才可以使用,该过程成为方法定义 方法创建后并不是直接可以运行的,需要手动 ...

  2. PyCharm的安装使用

    一.安装 1.进入官网点击下载 2.打开文件夹 3.点击next 4.选择安装路径 5.勾选创建桌面图标选项,点击next 6.点击安装 二.使用 1.import pycharm setting是指 ...

  3. Qt-设置背景色

    https://blog.csdn.net/qq_43793182/article/details/121980724?ops_request_misc=&request_id=&bi ...

  4. Android 6.0动态添加权限(Finn_ZengYuan博客)

    1,随着手机版本变高,各种权限也有所限制:以下代码可人性化添加动态权限: 权限工具类1,2,3,4: 1,FinnPermissionConfig.CLass package com.finn.too ...

  5. OSPF配置常用命令知识总结

    OSPF配置常用命令知识总结 1.display ospf abr-asbr 命令用来显示OSPF的区域边界路由器和自治系统边界路由器信息. [R3]dis ospf abr-asbr OSPF Pr ...

  6. 从零搭建hadoop集群之hadoop集群安装

    1.集群规划   HDSF YARN hadoop01 NanemNode(主机点),DataNode NodeManager hadoop02 DataNode, SecondaryNamenode ...

  7. 使用Tablayout出现标题消失的原因:setupWithViewPager()的大坑

    TabLayout使用addTab方法添加标题,调用setupWithViewPager方法绑定ViewPager tabLayout.addTab(tabLayout.newTab().setTex ...

  8. Hibernate的工作流程

  9. 使用@RequestBody注解接收的实体类中的某些参数为null

    原因 postman调试接口 为null的参数命名不符合"驼峰法",类似实体类A的属性 cEnterpriseId ,这种命名是不规范的 和lombook的@Data注解有关 用p ...

  10. 统计学习导论之R语言应用(三):线性回归R语言代码实战

    统计学习导论(ISLR) 参考资料 The Elements of Statistical Learning An Introduction to Statistical Learning 统计学习导 ...