vxe-table合并行数据
< vxe- table
border
resizable
height= "500"
: scroll- y= "{enabled: false}"
: span- method= "mergeRowMethod"
: data= "tableData3"
>
< vxe- column type= "seq" width= "60" / >
< vxe- column field= "key" title= "设备名称" / >
< vxe- column field= "num" title= "Num" / >
< vxe- column field= "content" title= "Translate" / >
< vxe- column field= "language" title= "Language" >
< template v- slot= "{ row }" >
< div @click= "getRow(row)" > { { row. language } } < / div>
< / template >
< / vxe- column>
< vxe- column field= "key" title= "操作" >
< template v- slot= "{ row }" >
< div @click= "getRow(row)" > 获取数据< / div>
< / template >
< / vxe- column>
< / vxe- table>
tableData3: [ ]
getDataList2 ( ) {
this . tableData3 = [
{ id: 10001 , key: 'app.label.name' , num: 1 , content: '名称' , language: '1' } ,
{ id: 10002 , key: 'app.label.name' , num: 1 , content: 'Name' , language: '2' } ,
{ id: 10003 , key: 'app.label.name' , num: 1 , content: '性别' , language: '3' } ,
{ id: 10004 , key: 'app.label.name' , num: 1 , content: 'Sex' , language: '4' } ,
{ id: 10005 , key: 'app.label.age' , num: 3 , content: '年龄' , language: '5' } ,
{ id: 10006 , key: 'app.label.age' , num: 3 , content: 'Age' , language: '6' } ,
{ id: 10007 , key: 'app.label.role' , num: 4 , content: '角色' , language: '7' } ,
{ id: 10008 , key: 'app.label.role' , num: 4 , content: 'Role' , language: '8' } ,
{ id: 10009 , key: 'app.label.address' , num: 5 , content: '地址' , language: '9' } ,
{ id: 10010 , key: 'app.label.address' , num: 5 , content: 'Address' , language: '10' } ,
{ id: 10011 , key: 'app.label.nickname' , num: 6 , content: '昵称' , language: '11' } ,
{ id: 10012 , key: 'app.label.nickname' , num: 6 , content: 'Nickname' , language: '12' }
]
} ,
mergeRowMethod ( { row, _rowIndex, column, visibleData } ) {
console. log ( row, _rowIndex, column, visibleData)
const fields = [ 'key' , 'num' ]
const cellValue = row[ column. field]
if ( cellValue && fields. includes ( column. field) ) {
const prevRow = visibleData[ _rowIndex - 1 ]
let nextRow = visibleData[ _rowIndex + 1 ]
if ( prevRow && prevRow[ column. field] == = cellValue) {
return { rowspan: 0 , colspan: 0 }
} else {
let countRowspan = 1
while ( nextRow && nextRow[ column. field] == = cellValue) {
nextRow = visibleData[ ++ countRowspan + _rowIndex]
}
if ( countRowspan > 1 ) {
return { rowspan: countRowspan, colspan: 1 }
}
}
}
} ,
getRow ( row) {
console. log ( row)
} ,