526互联

element plus el-table表格合并

发布时间 2023-12-08 09:15:14作者: Cxymds

el-table表格合并实现都是使用表格的span-method属性绑定操作函数

  <el-table :data="table.data"  :span-method="objectSpanMethod" > </el-table>

操作函数格式

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
}

相同值行合并

对于相同的值进行行合并是最常见的合并需求，实现思路就是先统计相同的值，然后进行合并。以下提供一种封装思路

import dayjs from 'dayjs'
/**
 * 范围日期禁用方法
 * @param {String} disanledDay //before after 今天之前还是今天之后
 * @param {Boolean} includingToday=false // 是否包含今天
 * @returns {any}
 */
export const useDateRangeRule = (disanledDay = '', includingToday = false) => {
  let datePockStar = ''
  /**
   * 限制时间区间选择范围，起始点不限，结束点限制
   * @param {Date} time
   * @param {String} timeType='year' //year month week day 类型参考 dayjs
   * @param {Number} timeNum=1 // 默认1
   * @returns {any}
   */
  const disabledDate = (time, timeType = 'year', timeNum = 1) => {
    // 限制选择今天之前还是之后
    if (disanledDay) {
      const before = dayjs().isBefore(includingToday ? dayjs(time) : dayjs(time).add(1, 'day'))
      if (disanledDay === 'before' && before) {
        return before
      }
      const after = dayjs().isAfter(includingToday ? dayjs(time).add(1, 'day') : dayjs(time))
      if (disanledDay === 'after' && after) {
        return after
      }
    }
    if (datePockStar) {
      const diff = Math.abs(dayjs(datePockStar).diff(time, timeType, true))
      if (diff > timeNum) {
        return true
      }
    }
  }
  /**
   * 记录日期范围选择第一个日期
   * @param {Date} val
   * @returns {any}
   */
  const calendarChange = val => {
    if (val && val.length > 0 && !val[1]) {
      datePockStar = val[0]
    } else {
      datePockStar = ''
    }
  }
  return {
    disabledDate,
    calendarChange
  }
}

使用也比较简单

import  引入 useDateRangeRule 

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
 return useDateRangeRule(table.data,['name','area'])({ row, column, rowIndex, columnIndex })
}

指定列的合并

首先需要对数据进行处理，思路也是让要合并的数据知道自己占多少格。被合并的单元格所占格数为0。
数据处理的格式可随意，只要能判断出当前单元格占几格即可。最后进行合并函数处理。

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 要合并的列
  const spanColumns = ['area', 'elePrice', 'lineLoseRate']
  if (spanColumns.includes(column.property)) {
    return {
      rowspan: row.rowspan,
      colspan: 1
    }
  }
}