< ! -- :span-method= "objectSpanMethod" 合并列 -->
< el-table stripe :data= "morningdataList" style = "width: 100%" :span-method= "objectSpanMethod" >
< el-table-column align = "center" label = "" :show-overflow-tooltip= "true" prop = "bigCategoryName" > < /el-table-column>
< el-table-column align = "center" label = "" :show-overflow-tooltip= "true" prop = "smallCategoryName" width = "70px" > < /el-table-column>
< el-table-column align = "center" label = "本日" prop = "today" width = "70px" > < /el-table-column>
< el-table-column align = "center" label = "比率/出率" prop = "rate" width = "90px" > < /el-table-column>
< el-table-column align = "center" label = "月累计" prop = "monthTotal" width = "70px" > < /el-table-column>
< el-table-column align = "center" label = "月比率/出率" prop = "monthRate" width = "90px" > < /el-table-column>
< /el-table>
// 合并列
objectSpanMethod( { row, column, rowIndex, columnIndex } ) {
let that = this;
// 因为日期在第一项,从0开始判断columnIndex == = 0 合并第一列
if ( columnIndex == = 0 ) {
// 当前行值及日期值为:bigCategoryName
let idName = that.morningdataList[ rowIndex] .bigCategoryName;
// rowIndex是行索引,判定第二行是不是和前面一行的日期值相同
if ( rowIndex > 0 ) {
if ( that.morningdataList[ rowIndex] .bigCategoryName != that.morningdataList[ rowIndex - 1 ] .bigCategoryName) {
let i = rowIndex;
let num = 0 ;
// 遍历
while ( i < that.morningdataList.length) {
if ( that.morningdataList[ i] .bigCategoryName == = idName) {
i++;
num++;
} else {
i = that.morningdataList.length;
}
}
return {
// 这里返回的num就是有相同的行数
rowspan: num,
// 合并几列,实例中只是跨行合并,不跨列合并,所以用的1
colspan: 1 ,
}
} else {
return {
rowspan: 0 ,
colspan: 1 ,
}
}
} else {
let i = rowIndex;
let num = 0 ;
while ( i < that.morningdataList.length) {
if ( that.morningdataList[ i] .bigCategoryName == = idName) {
i++;
num++;
} else {
i = that.morningdataList.length;
}
}
return {
rowspan: num,
colspan: 1 ,
}
}
}
} ,