Vxe Table/Grid 单元格分组合并

要合并的列

['htbm','htmc','hetd','hetdws','yjs']

一般的合并，不带逻辑，直接就把各自列对应的相同名字的列合并了，如下所示，不是合同的数据，值一样，直接给合并了

加上逻辑区分后的合并，会依次判断前面的字段一致后才合并后面的字段，效果图如下：

实现思路：

1、配置要合并的字段

:mergeFields="['htbm','htmc','hetd','hetdws','yjs']"

2、实现vxe table或者grid的合并方法

:span-method="mergeRowMethod"

3、具体mergeRowMethod的实现方法如下

// 通用行合并函数（将相同多列数据合并为一行）mergeRowMethod({ row, _rowIndex, column, visibleData }) {const fields = this.mergeFields;if (fields.length == 0) {return;}const cellValue = row[column.property];if (cellValue != undefined &&cellValue != null &&fields.includes(column.property)) {const prevRow = visibleData[_rowIndex - 1];let nextRow = visibleData[_rowIndex + 1];//if (prevRow && prevRow[column.property] === cellValue) {if (prevRow && this.checkMergeFields(row, prevRow, column.property)) {return { rowspan: 0, colspan: 0 };} else {let countRowspan = 1;//while (nextRow && nextRow[column.property] === cellValue) {while (nextRow && this.checkMergeFields(row, nextRow, column.property)) {nextRow = visibleData[++countRowspan + _rowIndex];}if (countRowspan > 1) {return { rowspan: countRowspan, colspan: 1 };}}}},//循环判断前面的列，如果值不一样的话就不合并checkMergeFields(row, nextRow, property) {var ret = true;for (var i = 0; i < this.mergeFields.length; i++) {var field = this.mergeFields[i];if (nextRow[field] != row[field]) {ret = false;break;}if (field == property) {break;}}return ret;},

Vxe Table/Grid 单元格分组合并相关推荐

table表格单元格的合并详解
1.html实现表格 <el-tablemax-height="300":columns="columns":data="tableData&q ...
html5合并单元格边框线,table边框表头单元格空间合并等设置，
table边框表头单元格空间合并等设置, 表格由标签定义).字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本.图片.列表.段落.表单.水平线.表格等等. 1 ...
Layui table表格单元格合并问题
Layui table表格单元格合并人丑话不多, 直接上方法: /*** * @param fieldName 要合并列的field属性值* @param index 表格的索引值从1开始* @d ...
table表格中单元格的合并
目录 table表格中单元格的合并 table表格中单元格的合并很多朋友不一定了解,今天我就写一篇博客来跟大家分享一下table表格中的跨行合并和跨列合并. 我们先看一个合并过的表格,大家可以先思考一 ...
iview table 求和_iView table 实现单元格合并
前言当前问题使用的ivew 版本:3.4.2 后续版本可能会实现相关功能,请留意官方文档. 背景最近做的项目使用的是iView框架,有个需求是要对iView的table进行单元格合并,但是iVie ...
html js 合并单元格合并单元格,js合并table单元格实例
这里展示js合并table的单元格,代码亲测可行后台采用springmvc搭建 Record实体类public class Record { public String isp; public St ...
合并单元格两行_28 HTML5标签学习——table单元格的合并
成长是一辈子的事儿!大家好!我是时问新.分享前端.Python等技术,以及个人成长路上的那些事儿. 表格是可以进行单元格的合并的. 比如下图所示: 单元格A跨了两列,单元格E跨了两行.这就是单元格的合 ...
iview table表格单元格的动态合并
1. 需求需要将从后台获取的数据,在前端渲染时,如果同一列相邻的数据相同,则合并成一个单元格. 即: 需要将上图两个单元格合并,成果图如下 2. 问题本项目使用的是iview组件,iview组件也 ...
实现前台表格中相同数据单元格的合并
前些天接到组长分配的任务,让我这个小菜鸟实现单元格的合并.刚开始觉得很复杂,可是仔细思考过后其实还是很简单的,下面就和大家分享一下自己每次的方法和存在的缺点以及如何修改和最终的成品,希望能够对大家有些 ...

Vxe Table/Grid 单元格分组合并

Vxe Table/Grid 单元格分组合并相关推荐

最新文章

热门文章