< el- table : data= "tableData" border style= "width: 100%;" : span- method= "objectSpanMethodAuto" >
< ! -- 空状态 -- >
< template slot= "empty" >
< div> < img src= "@/assets/images/noData.png" / > < / div>
< span> 暂无数据< / span>
< / template>
< el- table- column type= "index" label= "序号" width= "80" align= "center" >
< / el- table- column>
< el- table- column label= "年度" align= "center" prop= "year" >
< / el- table- column>
< el- table- column prop= "regionName" label= "行政区划" align= "center" >
< / el- table- column>
< el- table- column align= "center" >
< template slot= "header" >
< div class = "header-con" > (万人)< / div>
< div class = "header-name" > 农业人口数量< / div>
< / template>
< template slot- scope= "scope" >
< div> { { scope. row. ruralPopNum } } < / div>
< / template>
< / el- table- column>
< el- table- column align= "center" >
< template slot= "header" >
< div class = "header-con" > (万人)< / div>
< div class = "header-name" > 城镇人口数量< / div>
< / template>
< template slot- scope= "scope" >
< div> { { scope. row. urbanPopNum } } < / div>
< / template>
< / el- table- column>
< el- table- column label= "操作" align= "center" >
< template slot- scope= "{ row }" >
< el- button type= "text" size= "small" class = "operation" style= "color: #2372ed;" @click= "handleEditTable(row)" > 编辑< / el- button>
< el- button type= "text" size= "small" class = "operation" style= "color: #2372ed;" @click= "handleDelete(row)" > 删除< / el- button>
< / template>
< / el- table- column>
< / el- table>
data : function ( ) {
return {
spanArr : [ ] ,
tableData : [ ]
}
}
getList ( ) {
getPopList ( this . query) . then ( ( res ) => {
this . totalCount = res. total;
this . tableData = res. rows;
let contactDot = 0 ;
let spanArr = [ ] ;
this . tableData. forEach ( ( item, index ) => {
if ( index === 0 ) {
console. log ( spanArr) ;
spanArr. push ( 1 ) ;
} else {
if ( item. year === this . tableData[ index - 1 ] . year) {
spanArr[ contactDot] += 1 ;
spanArr. push ( 0 ) ;
} else {
contactDot = index;
spanArr. push ( 1 ) ;
}
}
} ) ;
this . spanArr = spanArr;
} ) ;
} ,
objectSpanMethodAuto ( { row, column, rowIndex, columnIndex } ) {
console. log ( "点击:" , row, column, rowIndex, columnIndex) ;
if ( columnIndex == 1 || columnIndex == 5 ) {
if ( this . spanArr[ rowIndex] ) {
return {
rowspan : this . spanArr[ rowIndex] ,
colspan : 1 ,
} ;
} else {
return {
rowspan : 0 ,
colspan : 0 ,
} ;
}
}
} ,