vue项目中使用element ui el-table合并单元格，根据业务需求动态合并的通用方式

以下内容参考：https://blog.csdn.net/zsl471260400/article/details/90675667?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

  <el-table
      v-loading="listLoading"
      :span-method="mergeLine"
      :highlight-current-row="false"
      :data="managerList"
      style="width: 100%;margin-top:20px;"
      border
    
    >
</el-table>
 
 

  mergeLine({ row, column, rowIndex, columnIndex }) {
      const span = column['property'] + '-span';
      if (row[span]) {
        return row[span];
      }
    },
 
 



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;
}
//下半部分会有错位的可能
// 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
//         };
//       }
//       console.log(v)
//       return v;
//     });
//   });

//   return data;
// }

今天太忙了，后续再解释，也可以看原博主的博客哦

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;
}
// 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
//         };
//       }
//       console.log(v)
//       return v;
//     });
//   });

//   return data;
// }

vue项目中使用element ui el-table合并单元格，根据业务需求动态合并的通用方式

推荐阅读