目标效果如下:
实现代码如下:
html部分:
<!--定义表格组件,用组件自带的span-method属性定义合并列的方法-->
<el-table :data="tableData" :span-method="spanRow">
<el-table-column prop="RegionName" label="园区"></el-table-column>
</el-table>
js部分:
data(){
return {
//记录需要合并列的rowspan数值
row_span:[],
//记录需要设置rowspan的行序号,因为数值是和row_span进行累加的结果,需要把第一个赋值为0才不会报错
row_index:[0]
}
}
method:{
spanRow({row,column,rowIndex,columnIndex}){
if(columnIndex===0){
for(let i=0;i<this.row_index.length;i++){
if(rowIndex===this.row_index[i])
return [this.row_span[i],1]
}
return [0,0]
}
},
get_rowspan(){
this.row_span=[];this.row_index=[0]
//通过判断本行数据和下一行数据是否相等给row_span赋值
for(let i=0,j=1;i<this.tableData.length-1;i++){
if(this.tableData[i].RegionName==this.tableData[i+1].RegionName)
j++
else{
this.row_span.push(j)
j=1
}
if(i==this.tableData.length-2)
this.row_span.push(j)
}
//用得到的row_span给row_index赋值
for(let i=0;i<this.row_span.length-1;i++){
this.row_index.push(this.row_index[this.row_index.length-1]+this.row_span[i])
}
//考虑到表格数据仅有一行的特殊情况
if(this.tableData.length==1)
this.row_span.push(1)
}
}