Element plus 动态合并单元格(行合并)

直接看代码

/**
 * @param {*} param = {
 * data：要合并的table数据
 * arg: 要合并的 字段名
 * superiors: arg基于哪个字段进行合并(可不传，不传基于arg自身进行合并)
 * }
 * @returns 
 */
//  获取当前字段合并单元格的list数据
const getCurSameFields = (data, arg, superiors) => {
  const sameFilesList = []
  let start
  let superiorsVal
  if (data?.length > 0) {
    data.forEach((item, index) => {
      if (index === 0) {
        sameFilesList.push(1);
        start = 0
        if (superiors) superiorsVal = data[index][superiors]
      }
      if (index > 0) {
        if (superiors && data[index][superiors] === superiorsVal || !superiors) {
          if (data[index][arg] === data[index - 1][arg]) {
            sameFilesList[start] += 1;
            sameFilesList[index] = 0
          } else {
            sameFilesList.push(1);
            start = index;
          }
        } else {
          superiorsVal = data[index][superiors]
          sameFilesList.push(1);
          start = index;
        }
      }
    })
  }
  return sameFilesList
}

// 传入需要合并的单元格数据,第一个参数是table传入的参数,第二个参数合并参数传数组
// eg:
// const arr = [
//     {
//         mergeColumn: 0, // 要合并的列（第几列，从0开始）
//         sameFieldsList: getCurSameFields(data, 'name') // 要合并的单元格字段名数组
//     },
//     {
//         mergeColumn: 1, // 要合并的列（第几列，从0开始）
//         sameFieldsList: getCurSameFields(data, 'age') // 要合并的单元格字段名数组
//     }
// ]
const useMergeCells = (tableObj, mergeObj) => {
    if (Array.isArray(mergeObj)) {

        for (let i = 0; i < mergeObj.length; i++) {
            if (tableObj.columnIndex === mergeObj[i].mergeColumn) {
                const _row = mergeObj[i].sameFieldsList[tableObj.rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                  }
            }
            
        }
    }
}

项目中使用

<template>
  <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
<script setup>
// 获取table数据
const mergeList = ref([])
const getTableInfo = async() => {
  tableLoading.value = true
  try {
    const data = await  api()
    mergeList.value = [{
          mergeColumn: 0,
          sameFieldsList: getCurSameFields(data , 'date') // 合并第一列的date
        },
        {
          mergeColumn: 2,
          sameFieldsList: getCurSameFields(data, 'address', 'name') // 基于name合并第三列的address
        }
      ]
  } catch (error) {
    
  }
}

const objectSpanMethod = (obj) => {
  return useMergeCells(obj, mergeList.value)
}
</script>