<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. ChatGPT 爆火!真有那么神?设计师会失业吗?

    人工智能来了,咱们是不是都要失业了呢? 一款AI产品,在科技市场和资本市场掀起了一阵风暴. 一切的源头,来自一个由美国人工智能公司OpenAI开发的一种大型语言模型ChatGPT.它采用了Transf ...

  2. charles的坑

    https://blog.csdn.net/qq_42191801/article/details/80288804 https://zhuanlan.zhihu.com/p/108960019 1. ...

  3. 随机数Random和SecureRandom

    "Random" objects should be reused Bug Critical Main sources owasp-a6 Available SinceNov 16 ...

  4. vue 点击元素滚动到指定位置(滑动到指定位置对应标签自动选中)

    一:各个模块不相同情况 1.内容部分<div class="anchor"> <div v-for="(item,index) in anchors&q ...

  5. PyQt5弹框定时关闭(python)

    PyQt5使用QMessageBox,可以设置在几秒后关闭  (作者使用的python3) info_box = QMessageBox()# 因为没使用这种方式 QMessageBox.inform ...

  6. DOS批处理自动定期清除生成的备份文件

    此功能实现生产环境自动定期清除备份文件. @echo off rem 功能:只保留7天的备份,每天运行. rem 日期:2022.8.15 rem 制作人:zl rem 自动删除7天前的备份 rem ...

  7. 设置cudnn日志

    主要分为两个步骤,分别设置两个环境变量. 第一步,设置日志级别. # 三种级别,设置环境变量为1为开启,设置为0关闭. # CUDNN_LOGINFO_DBG # CUDNN_LOGWARN_DBG ...

  8. docker tomcat 环境构建

    docker build -t repos_local/centos-jdk7-tomcat7:0.0.1 . -t 设置tag名称, 命名规则registry/image:tag . 表示使用当前目 ...

  9. Excel下载乱码

    1.前端:一定不可以以ajax的请求方式,不然会弹出乱码. 要使用<a href="../Ajax/AjaxPrint.ashx?action=PrintClick&Tid=& ...

  10. WinForm嵌入Web网站

    1.安装CefSharp 2.GetMac()获取用户mac地址方法 3.根据错误提示新建CEFKeyBoardHander.cs form1.cs using CefSharp; using Cef ...