<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. Drift Programming | 漂移编程 | 哲学编程 | 架构设计 | TDD |DDD |Microservice

  2. vue中require动态加载图片

    <template> <img src="D:/images/01.png" alt="静态加载"> <img :src=&quo ...

  3. 问题记录_IDEA版本2021.2.3_debug时变量显示不全(只显示线程附近部分)

    问题记录_IDEA版本2021.2.3_debug时变量显示不全(只显示线程附近部分) 起因 把IDEA的版本从2019升级到了2021.2.3,在debug的时候发现变量的值能看到的很少,并不像20 ...

  4. MySql索引底层原理(01)

    目的:通过mysql获取数据,检索数据的原理来理解索引,以及如何利用好索引. 由于篇幅问题,可能会连载几篇文章. 从mysql获取一条数据说起: 我们知道,电脑的系统在获取数据的时候会旋转磁盘,然后移 ...

  5. 【C++】关于智能指针的简单学习

    智能指针 示例类: class String { private: string m_value; public: String(string str) :m_value(str) { cout &l ...

  6. “adb”不是内部或外部命令——解决方案

    在AS(Android Studio简称AS)app真机测试中adb可以轻松找到安卓设备,ADB全称Android Debug Bridge,用于Android设备进行交互,也可以这样理解ADB是An ...

  7. TODO留学小程序,展开,收起失效

    text设置user-select=true后,display: -webkit-box 失效? https://developers.weixin.qq.com/community/develop/ ...

  8. clickhouse 重启,软连接失效,增加存储路径

    1. 启动停止命令 systemctl start clickhouse-server systemctl stop clickhouse-server systemctl status clickh ...

  9. COM三大接口:IUnknown、IClassFactory、IDispatch。

    (1)COM组件有三个最基本的接口类,分别是IUnknown.IClassFactory.IDispatch. COM规范规定任何组件.任何接口都必须从IUnknown继承,IUnknown包含三个函 ...

  10. react组件传参记录,防止以后忘记,欢迎指正讨论

    c: 'Celsius', f: 'Fahrenheit' }; function toCelsius(fahrenheit) { return (fahrenheit - 32) * 5 / 9; ...