vxe-table合并行数据

柠檬花开_

已于 2024-07-16 17:55:22 修改

阅读量282

点赞数 3

文章标签： vxetable 合并行

于 2024-07-16 16:56:17 首次发布

本文链接：https://blog.csdn.net/Sunny_lxm/article/details/140471070

版权

场景：混批名称相同合并混批名称，在混批名称相同条件下合并相同的混批类型；在混混批类型相同条件下合并相同的混批值；在混批值相同条件下合并相同的单位

实现根据四个不同的key值，当四个key值对应相等时，合并行。并且值合并前四col

想要实现的结果如下图：

解决方案：代码如下（先简单实现了合并。代码可以后续优化）

mergeMixedSku ({row, _rowIndex, column, visibleData}) {
      const fields = ['mixedName', 'mixedType', 'mixedValue', 'mixedValueUnit']
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (column.property === 'mixedName') {
          if (prevRow && prevRow[column.property] === cellValue) {
            return {
              rowspan: 0,
              colspan: 0
            }
          } else {
            let countRowspan = 1
            while (nextRow && nextRow[column.property] === cellValue) {
              nextRow = visibleData[++countRowspan + _rowIndex]
            }
            if (countRowspan > 1) {
              return {
                rowspan: countRowspan,
                colspan: 1
              }
            }
          }
        } else if (column.property === 'mixedType') {
          if (prevRow && prevRow[column.property] === cellValue &&
            prevRow.mixedName === row.mixedName) {
            return {
              rowspan: 0,
              colspan: 0
            }
          } else {
            let countRowspan = 1
            while (nextRow && nextRow[column.property] === cellValue &&
            nextRow.mixedName === row.mixedName) {
              nextRow = visibleData[++countRowspan + _rowIndex]
            }
            if (countRowspan > 1) {
              return {
                rowspan: countRowspan,
                colspan: 1
              }
            }
          }
        } else if (column.property === 'mixedValue') {
          if (prevRow && prevRow[column.property] === cellValue &&
            prevRow.mixedName === row.mixedName &&
            prevRow.mixedType === row.mixedType) {
            return {
              rowspan: 0,
              colspan: 0
            }
          } else {
            let countRowspan = 1
            while (nextRow && nextRow[column.property] === cellValue &&
              nextRow.mixedName === row.mixedName &&
              nextRow.mixedType === row.mixedType) {
              nextRow = visibleData[++countRowspan + _rowIndex]
            }
            if (countRowspan > 1) {
              return {
                rowspan: countRowspan,
                colspan: 1
              }
            }
          }
        } else if (column.property === 'mixedValueUnit') {
          if (prevRow &&
            prevRow[column.property] === cellValue &&
            prevRow.mixedName === row.mixedName &&
            prevRow.mixedType === row.mixedType &&
            prevRow.mixedValue === row.mixedValue
          ) {
            return {
              rowspan: 0,
              colspan: 0
            }
          } else {
            let countRowspan = 1
            while (nextRow && nextRow[column.property] === cellValue &&
            nextRow.mixedName === row.mixedName &&
            nextRow.mixedType === row.mixedType &&
            nextRow.mixedValue === row.mixedValue) {
              nextRow = visibleData[++countRowspan + _rowIndex]
            }
            if (countRowspan > 1) {
              return {
                rowspan: countRowspan,
                colspan: 1
              }
            }
          }
        }
      }
    }