ElementUI的Table组件行合并 ,示例用官网vue3版的文档
< el- table : data= "tableData" : span- method= "objectSpanMethod" border style= "width: 100%; margin-top: 20px" > < el- table- column prop= "id" label= "ID" width= "180" / > < el- table- column prop= "name" label= "姓名" / > < el- table- column prop= "amount1" label= "数值 1(元)" / > < el- table- column prop= "amount2" label= "数值 2(元)" / > < el- table- column prop= "amount3" label= "数值 3(元)" / >
< / el- table>
export default { data ( ) { return { tableData : [ { id : '12987122' , name : '王小虎' , amount1 : '234' , amount2 : '3.2' , amount3 : 10 , } , { id : '12987123' , name : '王小虎' , amount1 : '165' , amount2 : '4.43' , amount3 : 12 , } , { id : '12987124' , name : '王小虎' , amount1 : '324' , amount2 : '1.9' , amount3 : 9 , } , { id : '12987125' , name : '王小虎' , amount1 : '621' , amount2 : '2.2' , amount3 : 17 , } , { id : '12987126' , name : '王小虎' , amount1 : '539' , amount2 : '4.1' , amount3 : 15 , } , { id : '12987126' , name : '王小虎' , amount1 : '539' , amount2 : '4.1' , amount3 : 15 , } , { id : '12987126' , name : '王小虎' , amount1 : '539' , amount2 : '4.1' , amount3 : 15 , } , { id : '12987126' , name : '王小虎' , amount1 : '539' , amount2 : '4.1' , amount3 : 15 , } , { id : '12987126' , name : '王小虎' , amount1 : '539' , amount2 : '4.1' , amount3 : 15 , } , { id : '12987126' , name : '王小虎' , amount1 : '539' , amount2 : '4.1' , amount3 : 15 , } , { id : '12987126' , name : '王小虎' , amount1 : '539' , amount2 : '4.1' , amount3 : 15 , } , ] , spanArr : [ 3 , 0 , 0 , 2 , 0 , 2 , 0 , 1 , 3 , 0 ] , spanArr2 : [ 2 , 0 , 1 , 1 , 1 , 2 , 0 , 1 , 1 , 2 ] , } ; } , methods : { objectSpanMethod ( { row, column, rowIndex, columnIndex } ) { if ( columnIndex === 0 ) { let _row = this . spanArr[ rowIndex] ; let _col = _row > 0 ? 1 : 0 ; return { rowspan : _row, colspan : _col, } ; } if ( columnIndex === 1 ) { let _row = this . spanArr2[ rowIndex] ; let _col = _row > 0 ? 1 : 0 ; return { rowspan : _row, colspan : _col, } ; } } , } ,
} ;
效果: