这段时间总是为难我胖虎,让一个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, '提示', {}); } })
以上代码部分借鉴了我公司前端的处理方式,从而解决了我的问题,记录一下