element中table表格合并进行封装

今天遇到了个问题，就是需要表格合并，页面写太麻烦，而且其他页面又要重新写一遍，直接封装一下就行
1、创建一个js文件，就叫index.js吧
上代码：

/**
 *
 * @param {Array} mergeKeys  要合并的keys数组
 * @param {Array} tableData  渲染table组件的原始数据
 * @param {String} distinguish  判断不同的标识
 */
export function handleTableSpan(mergeKeys, tableData, distinguish) {
  // F_KTBM
  const spanObj = {}
  if (
    mergeKeys instanceof Array &&
    tableData instanceof Array &&
    mergeKeys.length &&
    tableData.length
  ) {
    mergeKeys.forEach((key) => {
      spanObj[key] = []
      let position = 0
      tableData.forEach((item, index) => {
        if (index === 0) {
          spanObj[key].push(1)
          position = 0
        } else {
          // 如果要合并的key 值是引用数据类型，我们要先把 数组或者 对象转成json 格式然后对比
          if (
            tableData[index][key] instanceof Array ||
            tableData[index][key] instanceof Object
          ) {
            if (
              JSON.stringify(tableData[index][key]) ===
              JSON.stringify(tableData[index - 1][key])
            ) {
              spanObj[key][position] += 1
              spanObj[key].push(0)
            } else {
              spanObj[key].push(1)
              position = index
            }
          } else if (!isNaN(tableData[index][key])) {
            if (
              Number(tableData[index][key]).toFixed(2) ==
                Number(tableData[index - 1][key]).toFixed(2) &&
              tableData[index][distinguish] ===
                tableData[index - 1][distinguish]
            ) {
              spanObj[key][position] += 1
              spanObj[key].push(0)
            } else {
              spanObj[key].push(1)
              position = index
            }
          } else {
            if (
              tableData[index][key] == tableData[index - 1][key] &&
              tableData[index][distinguish] ===
                tableData[index - 1][distinguish]
            ) {
              spanObj[key][position] += 1
              spanObj[key].push(0)
            } else {
              spanObj[key].push(1)
              position = index
            }
          }
        }
      })
    })
    return spanObj
  }
}

/**
 *
 * @param {Object} tableObj table组件 span-method 方法四个参数{ row, column, rowIndex, columnIndex } 的对象
 * @param {Array} mergeKeys 要合并的keys数组
 * @param {Object} rowspanObj 经过 handleTableSpan 方法处理tableData 数据，得到的单元格的合并行数对象
 * @param {Boolean} notEmpty 是否要合并有 ’/‘ 单元格，此参数非必传。默认不合并, notEmpty = true 则合并
 */
export function handleObjectSpanMethod(
  tableObj,
  mergeKeys,
  rowspanObj,
  notEmpty
) {
  if (mergeKeys instanceof Array && rowspanObj instanceof Object) {
    const { row, column, rowIndex, columnIndex } = tableObj
    for (let i = 0; i < mergeKeys.length; i++) {
      let term
      if (notEmpty) {
        term = column.property === mergeKeys[i] && row[mergeKeys[i]] !== '/'
      } else {
        term = column.property === mergeKeys[i]
      }
      if (term) {
        const _row = rowspanObj[mergeKeys[i]][rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    }
  }
}

页面直接引入js文件里的两个方法就行
html代码

 <el-table
                :data="tableData1"
                ref="tablelay"
                border
                :span-method="spanMethod"
                height="400"
                style="width: 100%"
              >

最主要的就是:span-method这个方法

import { handleTableSpan, handleObjectSpanMethod } from '@/utils/index.js'

js代码如下

data(){
	return:{
		mergekeys: ['departName'],//需要合并的prop参数名
        rowspanObj: {},
	  }
    }
//方法如下
     // 合并表格
      spanMethod(tableObj) {
        return handleObjectSpanMethod(
          tableObj, //获取当前行所有的数据以及索引
          this.mergekeys1, //需要表格合并的props
          this.rowspanObj1, //row是合并列
          true
        )
      },
      // 阶段获取完表格定义一下
      getDataList() {
        this.rowspanObj1 = handleTableSpan(
          this.mergekeys1, //需要表格合并的props
          this.tableData4, //获取的table数据
          'departName' //需要合并的prop参数，根据实际来，需要合并那个传那个
        )
      },

注意，getDataList需要在请求到接口后调用一下就行了。
但是他只会拿上一级的数据跟下一级比较，如果合并的字段名字在后端返回的List中混乱，需要先循环一下（可以看我上一篇文章）。然后就实现了表格合并，内有不足之处，还希望能够提出！
最终结果