tableList组件的单列合并工具

引入文件

  import merginTableCell from '@/utils/merginTableCell.js'// 工具所在路径

处理数据

  console.log('temp:', this.temp)
  this.list = merginTableCell.dealColumn(this.temp, 'tendersName')
  console.log('list:', this.list)

提示

dealColumn方法获得的list就是最终需要传递给tableList组件中的data数据。此方法参数有二：直接获取的数据；是否合并的判断标识字段。如上段代码，它的判断标识字段为tendersName，本方法可以根据tendersName字段值来判断，如果有2个一样值的数据，则会在第一个数据中增加tendersNameRowspan（判断标准的字段名+Rowspan）为字段名，值为2的字段。

展示数据

  // 注册单元格处理方法
  spanMethod({ row, column, rowIndex, columnIndex }) {
    if (!row.workPointName) {
      if (columnIndex === 0) {
        // 从第1列到第2列 合并
        return [1, 2]
      } else if (columnIndex === 1) {
        return [0, 0]
      }
    } else {
      return merginTableCell.createSpanMethod(
        'tendersName',
        (column, attr) => {
          return column.label === '标段'
        }
      )({
        row,
        column,
        rowIndex,
        columnIndex
      })
    }
  },

提示

createSpanMethod方法得到的结果传递给tableList的span-method属性，用来合并行或列的计算方法。此方法参数有二：是否合并的判断标识字段；作为判断的方法。本方法返回值是一函数，需要继续传参（span-method计算方法能获取的参数）调用。最终展示页面结果如下图。

组件源码及综合示例参考

源码 (opens new window)示例 (opens new window)