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;

// }