Element表格合并行

ElementUI 表格合并行（相邻行需要合并）

有图有真相

1. el-table 标签中加入 :span-method="objectSpanMethod" 方法
2. 对获取到的表格数据进行改造

   // 第二个参数为一个数组，放需要合并的字段名
   this.tableData = this.mergeTableRow(this.tableData, ['itemOutCode', 'itemName','itemCode','deptCodeName','voltLevelName'])
   
   mergeTableRow(data, merge) {
       if (!merge || merge.length === 0) {
         return data
       }
       // m为需要合并的字段名
       merge.forEach((m) => {
         const mList = {}
         //遍历表格数据 v为一行的数据 
         data = data.map((v, index) => {
           //当前遍历行对应合并字段的值 
           const rowVal = v[m]
           if (mList[rowVal] && mList[rowVal].newIndex === index) {
             //当前行与上一行的项目编码相同时才设置
             if(data[index]['itemCode'] == data[index-1]['itemCode']){
               mList[rowVal]['num']++;
               mList[rowVal]['newIndex']++;
               data[mList[rowVal]['index']][m + '-span'].rowspan++;
               data[mList[rowVal]['index']]['select-span'].rowspan++;
               v[m + '-span'] = {
                 rowspan: 0,
                 colspan: 0
               }
               v['select-span'] = {
                 rowspan: 0,
                 colspan: 0
               }
             }else{
               mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
               v[m + '-span'] = {
                 rowspan: 1,
                 colspan: 1
               }
               v['select-span'] = {
                 rowspan: 1,
                 colspan: 1
               }
             }
             
           } else {
             mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
             v[m + '-span'] = {
               rowspan: 1,
               colspan: 1
             }
             v['select-span'] = {
               rowspan: 1,
               colspan: 1
             }
           }
           return v
         })
       })
       return data
     },
   

3. 合并方法

    //合并列方法
   objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     const span = column['property'] + '-span'
     console.log(column['property'])
     if(row[span]){
       console.log('咧咧咧');
       console.log(row[span])
       console.log(rowIndex+'行'+'----'+columnIndex+'列')
       return row[span]
     }
   },