<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. Winform窗体中打开PDF文件的三种方式

    来源:https://www.jb51.net/article/251451.htm

  2. 杂:python_windows标准输出带颜色

    import ctypes handle = ctypes.windll.kernel32.GetStdHandle(-11) # -11 for output   -10 for input   - ...

  3. IaaS--区域和可用区(何恺铎《深入浅出云计算》笔记整理)

    [关键概念] IaaS(Infrastructure as a Service):即"基础设施即服务",一般指云计算所提供的计算.存储.网络等基本底层能力.是基于软件技术对物理硬件 ...

  4. 提取可执行文件中的调试信息 objcopy --only-keep-debug app app.debug

    https://blog.csdn.net/CaspianSea/article/details/17269977 set-debug-directory show-debug-directory i ...

  5. 实现docker run命令

    基于宿主机来创建容器 执行命令 <自己动手写Docker>code-3.1 ./mydocker run -ti /bin/bash 代码流程 1. 解析参数.2. 通过clone来for ...

  6. SDIO接口WIFI&BT之相关常备知识

    SDIO接口WIFI&BT之相关常备知识 <VBAT>:>Main Power Voltage Soure Input      主电源输入(SDIO WIFI目前知道的都是 ...

  7. 初始化centos环境脚本

    #! /bin/bashecho "java环境初始化开始"#功能描述: Centos8.5系统自动初始化脚本#自动配置:IP地址\Yum源\docer\docker-compos ...

  8. shadow-socks 服务器配置

    https://msd.misuland.com/pd/2884250034537239234 按照上述教程 使用python3 时 pip3 install 会报错 可以按照如下连接修复 https ...

  9. dart extends 覆盖规则

    1,不覆写super的变量,child会自动继承super的变量.即使是在child里给super赋值,child里也是可以访问到的,可能是因为引用的关系. 2,只要覆写了super的变量,只给sup ...

  10. Python用telnet设置,抓UDP抓采样点并显示

    ====main.bat==== echo off rem "d:\Program\WiresharkPortable64\App\Wireshark\tshark.exe" -- ...