VUE table数据合并单元格

1.el-table标签里添加 :span-method=“方法名”（前面加“:”表示动态数据），在方法中处理合并行/列的逻辑。

2.首先看看官网的例子，但是很难满足需要

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {    //用于设置要合并的列
          if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
            return {
              rowspan: 2,　　　　　//合并的行数
              colspan: 1          //合并的列数，设为０则直接不显示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

3.排序好的数据进行合并js（亲测好用）

/**
 1.  table合并行通用 */
export function mergeTableRow(data, merge) {
  if (!merge || merge.length === 0) {
    return data
  }
  merge.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      const rowVal = v[m]
      if (mList[rowVal]) {
        mList[rowVal]++
        data[index - (mList[rowVal] - 1)][m + '-span'].rowspan++
        v[m + '-span'] = {
          rowspan: 0,
          colspan: 0
        }
      } else {
        mList[rowVal] = 1
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}
//这是单独的引入，写在js上，我单独摘出来为了方便看
import { mergeTableRow } from "@/api/lib/airtjtool";

4.没有排好序的

/**
 1. 改良后（不相邻的数据相互不受影响）
 2.  table合并行通用 */
export function mergeTableRow(data, merge) {
  if (!merge || merge.length === 0) {
    return data
  }
  merge.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      const rowVal = v[m]
      if (mList[rowVal] && mList[rowVal].newIndex === index) {
        mList[rowVal]['num']++
        mList[rowVal]['newIndex']++
        data[mList[rowVal]['index']][m + '-span'].rowspan++
        v[m + '-span'] = {
          rowspan: 0,
          colspan: 0
        }
      } else {
        mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}

5.主要调用如下

created(){
  // 给table赋值，重新遍历新增rowSpan属性，checkRoom，appointmentTime为table里面需要合并的属性名称，根据自己需要给表赋值
  this.table = mergeTableRow(this.table, ['checkRoom', 'appointmentTime'])
},
methods: {
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     //合并列的属性
     const span = column['property'] + '-span'
     if(row[span]){
         return row[span]
     }
  }
}