本文章提供了elementUI根据列表id进行列合并的demo,效果如图(可直接复制代码粘贴)
< template>
< div id= "app" >
< el- table border : data= "tableList" style= "width: 100%" : span- method= "objectSpanMethod" >
< el- table- column
type= "selection"
width= "55" >
< / el- table- column>
< 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- column prop= "type" label= "后缀" >
< / el- table- column>
< el- table- column prop= "about" label= "地址" >
< / el- table- column>
< el- table- column prop= "dec" label= "第一联想" >
< / el- table- column>
< / el- table>
< / div>
< / template>
< script>
export default {
name : 'App' ,
components : {
} ,
data ( ) {
return {
tableList : [
{ id : 10010 , name : '小日' , type : '子' , dec : '小男孩来过这个地方' , about : '广岛' } ,
{ id : 10010 , name : '小日' , type : '子' , dec : '胖子来过这个地方' , about : '长崎' } ,
{ id : 10010 , name : '小日' , type : '子' , dec : '李梅在这里抽过yan' , about : '东京' } ,
{ id : 10010 , name : '小日' , type : '子' , dec : '这是一个地震多发的地方' , about : '大板' } ,
{ id : 21121 , name : '印度' , type : '斯坦' , dec : '干净又卫生的超级大国' , about : '德里' } ,
{ id : 21121 , name : '印度' , type : '斯坦' , dec : '新德里是首都' , about : '新德里' } ,
{ id : 21121 , name : '印度' , type : '斯坦' , dec : '这是提前选好的下一个首都' , about : '新新德里' } ,
{ id : 21121 , name : '印度' , type : '斯坦' , dec : '没办法的话这是下下个首都' , about : '新新新德里' } ,
]
}
} ,
methods : {
objectSpanMethod ( { row, column, rowIndex, columnIndex } ) {
console. log ( row, column)
if (
columnIndex == 0 ||
columnIndex == 1 ||
columnIndex == 2 ||
columnIndex == 3
) {
const _row = this . flitterData2 ( this . tableList) . one[ rowIndex] ;
const _col = _row > 0 ? 1 : 0 ;
return {
rowspan : _row,
colspan : _col,
} ;
}
} ,
flitterData2 ( arr ) {
let spanOneArr = [ ] ;
let concatOne = 0 ;
arr. forEach ( ( item, index ) => {
if ( index === 0 ) {
spanOneArr. push ( 1 ) ;
} else {
if ( item. id === arr[ index - 1 ] . id) {
spanOneArr[ concatOne] += 1 ;
spanOneArr. push ( 0 ) ;
} else {
spanOneArr. push ( 1 ) ;
concatOne = index;
}
}
} ) ;
return {
one : spanOneArr,
} ;
} ,
}
}
< / script>
< style>
#app {
font- family: Avenir, Helvetica, Arial, sans- serif;
- webkit- font- smoothing: antialiased;
- moz- osx- font- smoothing: grayscale;
text- align: center;
color : #2c3e50;
margin- top: 60px;
}
< / style>