vue+element-ui实现表格合并行

2018/09/03 18:59
阅读数 395

这段时间总是为难我胖虎,让一个java程序员写vue。一开始就复制粘贴,照着vue文档改改需求也是蛮爽的,这个星期突然接到活,有一块需要实现表格的合并行,真是让人头大.jpg

element-ui官方:

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspancolspan的对象。

<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,这样就解决了我的问题,记录一下

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部