本文章提供了elementUI根据列表id进行列合并的demo,效果如图(可直接复制代码粘贴)
< template> < div id= "app" > < el- table border : data= "tableList" style= "width: 100%" : span- method= "objectSpanMethod" > < el- table- columntype= "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>