<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. Linux 配置共享目录方法

    配置共享目录有三种方法: 第一种:使用Vmware自带的文件共享的功能,进入Vmware,点击虚拟机选项,然后点击"设置",再点击标签"选项"这一项,找到&qu ...

  2. (已解决)nginx+php 上传文件大小设置。

    1. 问题 上传文件过大报错,413 Request Entity Too Large. 2. 解决方法 修改配置文件,在以下两处: a. php.ini文件(php目录) 在File Uploads ...

  3. 软件工程日报七——checkbox的使用

    今天学了checkbox的使用 activity_main.xml文件为 <?xml version="1.0" encoding="utf-8"?> ...

  4. Object.assign() 方法浅析

    Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. const target = { a: 1, b: 2 ,c:3,e:6}; cons ...

  5. RabbitMQ管理界面使用之手动送数据

    目录 1. 找到相应的队列, 点击进入详情 2. 找到Publish Message项,填写自定义数据 3. 发送数据 4. 发送成功 5. 接收 1. 找到相应的队列, 点击进入详情 2. 找到Pu ...

  6. Linux下添加启动项并简化操作命令-nginx为例

    1.添加nginx为启动项        1. vi /etc/rc.d/rc.local        2.将启动命令直接添加到最后即可 *注:通过下图可知  /etc/rc.d/rc.local和 ...

  7. 谷歌是如何改进 GKE、Cloud Run 的 gVisor 文件系统性能的?

    灵活的应用程序架构.CI/CD 管道和容器工作负载通常运行不受信任的代码,因此应该与敏感的基础设施隔离.一种常见的解决方案是部署纵深防御产品(如使用gVisor的GKE Sandbox)以通过额外的保 ...

  8. pytest-2 之前后置及 conftest.py+fixture+yield实现用例前后置

    pytest测试用例及类级别的前置,可以和unittest一样进行定义,也可以把该前置方法或类定义到conftest.py里,而在需要前置的方法的参数里加上该前置名作为参数: pytest有两种方式来 ...

  9. 2022NCTF

    是真的菜 开始复现把 calc 访问之后获得源码 @app.route("/calc",methods=['GET']) def calc(): ip = request.remo ...

  10. HTML中javascript的<script>标签使用方法详解

    只要一提到把JavaScript放到网页中,就不得不涉及Web的核心语言--HTML.在当初开发JavaScript的时候,Netscape要解决的一个重要问题就是如何做到让JavaScript既能与 ...