vue 中element-ui 表格合并 span-method

• template

   <el-table :data="tagConfLost" :span-method="arraySpanMethod">

• script

   arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      /**
       * row： 行---横
       * column： 列---竖
       * 这个函数，表格有多少格子就执行多少次，rowIndex和columnIndex确定当前在那个格子。
       * 被合并的那些格子每个都要 return [0,0]，不然数据填放的位置会不对。
       * {Array} mergeData=[]
       *   
       * {
       *    rowIndex:0,//表格合并开始的行的索引
       *    columnIndex:0,//表格合列开始的行的索引
       *    mergeRowIndex:10,//合并的行数
       *    mergeColumnIndex:1,//合并的列数
       *    rowMergeArr:[0,1,2,3,4,5,6,7,8,9],//长度mergeRowIndex，[rowIndex,rowIndex+1,rowIndex=2,...]
       *    columnMergeArr:[0],//长度mergeColumnIndex,[columnIndex,columnIndex+1,columnIndex+2,...]
       * },
      */
     let returnArr=[]
     try {   
       mergeData.forEach(el=>{
         if (rowIndex === el.rowIndex&&columnIndex==el.columnIndex) { 
           returnArr= [el.mergeRowIndex, el.mergeColumnIndex]
           throw new Error('end')
          }else if(el.rowMergeArr.includes(rowIndex)&&el.columnMergeArr.includes(columnIndex)){
            returnArr= [0, 0]
            throw new Error('end')
          }
       })
     } catch (error) {
       console.log('end');
     }
     if(returnArr.length>0) return returnArr
   }

• 数据

const tagConfLost = [
        {
          id: 1,
          tag_fir_name: '基础业务标签',
          tag_sec_name: '基础属性标签',
          tag_thr_name: '立项时间',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
        {
          id: 1,
          tag_fir_name: '基础业务标签',
          tag_sec_name: '基础属性标签',
          tag_thr_name: '立项时间',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
        {
          id: 1,
          tag_fir_name: '基础业务标签',
          tag_sec_name: 'test',
          tag_thr_name: 'test',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
        {
          id: 1,
          tag_fir_name: '风控标签',
          tag_sec_name: 'test',
          tag_thr_name: 'test',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
        {
          id: 1,
          tag_fir_name: '基础业务标签',
          tag_sec_name: 'test',
          tag_thr_name: 'test',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
        {
          id: 1,
          tag_fir_name: '基础业务标签',
          tag_sec_name: '基础属性标签',
          tag_thr_name: '筹款规模',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
        {
          id: 1,
          tag_fir_name: '风控标签',
          tag_sec_name: 'test',
          tag_thr_name: 'test',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
        {
          id: 1,
          tag_fir_name: '基础业务标签',
          tag_sec_name: 'test',
          tag_thr_name: 'test',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
        {
          id: 1,
          tag_fir_name: '风控标签',
          tag_sec_name: 'test',
          tag_thr_name: 'test',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
        {
          id: 1,
          tag_fir_name: '基础业务标签',
          tag_sec_name: '基础属性标签',
          tag_thr_name: '筹款规模',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
        {
          id: 1,
          tag_fir_name: 'test标签',
          tag_sec_name: 'test',
          tag_thr_name: 'test',
          tag_name: 'test',
          val_type: 'test',
          creater: 'test',
        },
      ]

  const mergeData=[
    {
      rowIndex:0,
      columnIndex:0,
      mergeRowIndex:10,
      mergeColumnIndex:1,
      rowMergeArr:[0,1,2,3,4,5,6,7,8,9],
      columnMergeArr:[0],
    },
    {
      rowIndex:4,
      columnIndex:3,
      mergeRowIndex:3,
      mergeColumnIndex:2,
      rowMergeArr:[4,5,6],
      columnMergeArr:[3,4],
    }
  ]