基础调用
table传入span-method方法可以实现合并行或列 :span-method="spanMethod"
<el-table
:data="tableData"
:span-method="spanMethod"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
</el-table>
data(){
return{
spanArr:[],
position:0,
key:'name'
}
}
methods:{
spanMethod({ row, column, rowIndex, columnIndex }) {
if(column.property==[this.key]){
const _row=this.spanArr[rowIndex];
const _col=_row>0?1:0;
return {
rowspan:_row,
colspan:_col
}
}
}
获取到数据之后调用
this.rowspan()
rowspan() {
this.spanArr=[];
this.position=0;
this.data.forEach((item,index)=>{
if(index===0){
this.spanArr.push(1)
this.position=0;
}else{
if(this.data[index][this.key]===this.data[index-1][this.key]){
this.spanArr[this.position] +=1;
this.spanArr.push(0)
}else{
this.spanArr.push(1)
this.position=index
}
}
})
},
来个进化版 我想合并单元格但是 需要合并的每个列不相同
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/56bcdba2098a3a85d0a03f2c3495b70b.png)
rowspan() {
this.spanArr1=[];
this.spanArr2=[];
this.position1=0;
this.position2=0;
this.crudData.forEach((item,index)=>{
if(index===0){
this.spanArr1.push(1)
this.spanArr2.push(1)
this.position1=0;
this.position2=0;
}else{
if(this.crudData[index][this.key]===this.crudData[index-1][this.key]){
this.spanArr1[this.position1] +=1;
this.spanArr1.push(0)
}
else{
this.spanArr1.push(1)
this.position1=index
}
if(this.crudData[index][this.key2]===this.crudData[index-1][this.key2]){
this.spanArr2[this.position2] +=1;
this.spanArr2.push(0)
}else{
this.spanArr2.push(1)
this.position2=index
}
}
})
},
spanMethod({ row, column, rowIndex, columnIndex }) {
if(column.property=='county' ){
const _row=this.spanArr1[rowIndex];
const _col=_row>0?1:0;
return {
rowspan:_row,
colspan:_col
}
}
if(column.property == 'name || column.property == 'age' || ){
const _row=this.spanArr2[rowIndex];
const _col=_row>0?1:0;
return {
rowspan:_row,
colspan:_col
}
}
},