vue+element-ui實現表格合並行

這段時間總是為難我胖虎，讓一個java程序員寫vue。一開始就復制粘貼，照着vue文檔改改需求也是蠻爽的，這個星期突然接到活，有一塊需要實現表格的合並行，真是讓人頭大.jpg

element-ui官方：

通過給table傳入span-method方法可以實現合並行或列，方法的參數是一個對象，里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數可以返回一個包含兩個元素的數組，第一個元素代表rowspan，第二個元素代表colspan。 也可以返回一個鍵名為rowspan和colspan的對象。

<el-table stripe :data="tableData" border :span-method="objectSpanMethod" class="width100 margintop20 trheight56">

methods: {
    objectSpanMethod({row,column,rowIndex,columnIndex}){
      if(columnIndex < 5) {
	 if(row.multiPrescriptions>0){
     		return {
      		    rowspan: row.multiPrescriptions,
     		    colspan: 1
    		};
	    }else{
		return {
   		    rowspan: 0,
   		    colspan: 0
     		};
	    }
    	}
  },

　　

axion.getPrescriptionList(parameter).then(d=>{
        if(d.data.returnCode == 200){
            this.totalCount=d.data.returnData.totalCount
          	this.prescriptionTable = d.data.returnData.list;
            this.tableData=[]
            if(this.prescriptionTable){
              var s = 0
              for(var i=0;i<this.prescriptionTable.length;i++){
                var element=this.prescriptionTable[i]
                if(element.westernPrescriptionList.length>0){
                  for(var j=0;j<element.westernPrescriptionList.length;j++){
                    this.tableData.push({
                      status:element.status,
                      departmentName:element.departmentName,
                      doctorName:element.doctorName,
                      patientName:element.patientName,
                      patientSex:element.patientSex,
                      patientAge:element.patientAge,
                      diagnosis:element.diagnosis,
                      caDoctorName:element.diagnosis.caDoctorName,
                      name:element.westernPrescriptionList[j].name,
                      quantity:element.westernPrescriptionList[j].quantity,
                      unit:element.westernPrescriptionList[j].unit,
                      dosage:element.westernPrescriptionList[j].dosage,
                      mode:element.westernPrescriptionList[j].mode,
                      frequency:element.westernPrescriptionList[j].frequency,
                      days:element.westernPrescriptionList[j].days,
                      createTime:element.westernPrescriptionList[j].createTime,
                    })
                    if(j===0){
                      this.tableData[s].multiPrescriptions = element.westernPrescriptionList.length
                    }
                    s++;
                  }
                }else{
                  this.tableData.push({
                    status:element.status,
                    departmentName:element.departmentName,
                    doctorName:element.doctorName,
                    patientName:element.patientName,
                    patientSex:element.patientSex,
                    patientAge:element.patientAge,
                    diagnosis:element.diagnosis,
                    name:'',
                    quantity:'',
                    unit:'',
                    dosage:'',
                    mode:'',
                    frequency:'',
                    days:'',
                    createTime:'',
                    multiPrescriptions:1
                  })
                  s++;
                }
              }
            }
        }else{
          this.$alert(d.data.returnMsg, '提示', {});
        }
      })

 以上代碼部分借鑒了我公司前端的處理方式，其實也很簡單，就是把后端返回的數據格式包裝成新的array，這樣就解決了我的問題，記錄一下