这段时间总是为难我胖虎,让一个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,这样就解决了我的问题,记录一下