table表格单元格的合并详解

1.html实现表格

<el-table
  max-height="300"
  :columns="columns"
  :data="tableData"
  :show-index="false"
  :span-method="objectSpanMethod"
  :header-cell-style="{ background: '#eef0f6' }"
/>

2.记录每个字段合并数的方法

/**
 * @description 获取表格某字段每一行合并数 有多少字段需要合并就调用几次
 * @param {Array} tableData 表格数据
 * @param {String} key 需要合并的字段
 * @return {Array} spanArr 存放每一行合并数 值为n表示n项合并，为0的项表示该项不显示
 */
getSpanPosition(tableData, key) {
  let pos = 0
  const spanArr = []
  for (let index = 0; index < tableData.length; index++) {
    //遍历列表数据，给spanArr存入一个1
    if (index === 0) {
      spanArr.push(1)
      pos = 0
    } else {
      // 判断某字段第二个值和前一个值是否相同，相同就给spanArr前一位加1，spanArr再存入0
      // spanArr值为n表示n项合并，为0的项表示该项不显示
      const value1 = tableData[index][key] // 唯一标识
      const value2 = tableData[index - 1][key]
      // 当上一个和当前相等的时候，说明是同一个
      if (value1 === value2) {
        spanArr[pos] += 1
        spanArr.push(0)
      } else {
        spanArr.push(1)
        pos = index
      }
    }
  }
  return spanArr
}

3.合并单元格方法

/**
 * @description 合并单元格方法
 * @param {Number} rowIndex 行序号
 * @param {Number} columnIndex 列序号
 * @param {Array} spanArr 
 */
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  //该形式为行合并 第1列 目的省份 合并方式 
  if (columnIndex === 0) {
    const provinceNameSpanArr = this.getSpanPosition(this.tableData, 'provinceName')
    const _row = provinceNameSpanArr[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return { rowspan: _row, colspan: _col }
  }
  //该形式为行合并 第1列 费用类型 合并方式 
  if (columnIndex === 1) {
    const feeTypeSpanArr = this.getSpanPosition(this.tableData, 'feeType')
    const _row = feeTypeSpanArr[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return { rowspan: _row, colspan: _col }
  }
  //该形式为列合并 第7行
  if (rowIndex === 6) {
    if (columnIndex === 2) {
      // 定位到6行3列 告诉单元格合并1行2列
      return [1, 2]
    }
    if(columnIndex === 3) {
      // 告诉该单元格不显示
      return [0,0]
    }
  }
}

4.最终效果图

table表格单元格的合并详解

猜你喜欢