【vxetable】vxeGrid合并单元格列处理spanMethod合并多列多行数据

与鱼有约

已于 2023-11-10 18:00:30 修改

阅读量2.4k

点赞数 3

文章标签： javascript 开发语言 ecmascript

于 2023-05-08 11:36:57 首次发布

本文链接：https://blog.csdn.net/weixin_62273193/article/details/130555651

版权

该文章介绍了一种在VxeTable组件中合并多列数据的方法，通过`span-method`属性结合JavaScript函数`mergeRowMethod`来实现。关键在于比较相邻行的特定字段值，当值相同时进行行合并。`checkMergeFields`函数用于检查所有指定的合并字段是否一致，确保正确合并。

摘要由CSDN通过智能技术生成

合并多列，后面一列需要根据前面一列在基本上再合并处理
合并效果
在这里插入vxeGrid合并单元格列处理图片描述
代码：

//组件 
:span-method="mergeRowMethod"
//js 部分
//  合并数据处理
    const fields = ['buyNo', 'flag'] //需要合并的列数据字段
    // 通用行合并函数（将相同多列数据合并为一行）
    const mergeRowMethod: VxeTablePropTypes.SpanMethod = ({ row, _rowIndex, column, visibleData }) => {
      if (fields.length == 0) {
        return;
      }
      const cellValue = row[column.field];
      if (
        cellValue != undefined &&
        cellValue != null &&
        fields.includes(column.field)
      ) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        //if (prevRow && prevRow[column.property] === cellValue) {
        if (prevRow && checkMergeFields(row, prevRow, column.field)) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          //while (nextRow && nextRow[column.property] === cellValue) {
          while (nextRow && checkMergeFields(row, nextRow, column.field)) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    }
    //循环判断前面的列，如果值不一样的话就不合并
    function checkMergeFields(row, nextRow, property) {
      var ret = true;
      for (var i = 0; i < fields.length; i++) {
        var field = fields[i];
        if (nextRow[field] != row[field]) {
          ret = false;
          break;
        }
        if (field == property) {
          break;
        }
      }

      return ret;
    }