效果图
一、html
< template>
< div>
< a- table : columns= "columns" : dataSource= "dataSource" rowKey= "id" : pagination= "false" bordered>
< template slot= "content1" slot- scope= "text" >
{ { text} }
< / template> < / a- table>
< / div>
< / template>
二、js
export default {
data ( ) {
return {
sortLevel : [ 'date' ] ,
columns : [
{
title : '日期' ,
align : 'center' ,
dataIndex : 'date' ,
key : 'date' ,
customRender : this . dateRender,
} ,
{
title : '内容' ,
colSpan : 2 ,
dataIndex : 'content' ,
scopedSlots : { customRender : 'content1' } ,
} ,
{
title : '内容' ,
colSpan : 0 ,
dataIndex : 'content2' ,
} ,
] ,
datas : [
{
id : 1 ,
content : '123' ,
content2 : 'qqw' ,
date : '周一'
} ,
{
id : 2 ,
content : '123' ,
content2 : 'qwqw' ,
date : '周二'
} ,
{
id : 3 ,
content : '123' ,
content2 : 'wewe' ,
date : '周一'
} ,
,
{
id : 42 ,
content : '12332' ,
content2 : 'sad' ,
date : '周三'
} ,
,
{
id : 52 ,
content : '1223' ,
content2 : 'asdasd' ,
date : '周一'
}
] ,
dataSource : [ ]
}
} ,
mounted ( ) {
this . dataSource = this . convertData ( this . datas)
console. log ( ' this.dataSource : ' , this . dataSource) ;
} ,
methods : {
dateRender ( value, row, index ) {
return {
children : value,
attrs : {
rowSpan : row. dateRowSpan
} ,
} ;
} ,
convertData ( arr, levelIndex = 0 ) {
const levelKey = this . sortLevel
const key = levelKey[ levelIndex]
let groupObj = this . groupBy ( arr, key) || { } ;
Object. keys ( groupObj) . forEach ( groupKey => {
if ( levelIndex < levelKey. length - 1 ) {
groupObj[ groupKey] = this . convertData ( groupObj[ groupKey] , levelIndex + 1 )
}
groupObj[ groupKey] . forEach ( ( item, index, arr ) => {
item[ ` ${ key} RowSpan ` ] = index === 0 ? arr. length : 0
} )
} )
return Object. values ( groupObj) . flat ( )
} ,
groupBy ( arr = [ ] , key ) {
let obj = { }
arr. forEach ( item => {
const val = item[ key]
if ( ! obj[ val] ) {
obj[ val] = [ ]
}
obj[ val] . push ( item)
} )
return obj
} ,
} ,
}
三、完整代码
< template>
< div>
< a- table : columns= "columns" : dataSource= "dataSource" rowKey= "id" : pagination= "false" bordered>
< / a- table>
< / div>
< / template>
< script>
export default {
data ( ) {
const renderContent = ( value, row, index ) => {
const obj = {
children : value,
attrs : { } ,
} ;
if ( index === 3 ) {
obj. attrs. colSpan = 0 ;
}
return obj;
} ;
return {
sortLevel : [ 'date' ] ,
columns : [
{
title : '日期' ,
align : 'center' ,
dataIndex : 'date' ,
key : 'date' ,
customRender : this . dateRender,
} ,
{
title : '内容' ,
colSpan : 2 ,
dataIndex : 'content' ,
} ,
{
title : '内容' ,
colSpan : 0 ,
dataIndex : 'content2' ,
} ,
] ,
datas : [
{
id : 1 ,
content : '123' ,
content2 : 'qqw' ,
date : '周一'
} ,
{
id : 2 ,
content : '123' ,
content2 : 'qwqw' ,
date : '周二'
} ,
{
id : 3 ,
content : '123' ,
content2 : 'wewe' ,
date : '周一'
} ,
,
{
id : 42 ,
content : '12332' ,
content2 : 'sad' ,
date : '周三'
} ,
,
{
id : 52 ,
content : '1223' ,
content2 : 'asdasd' ,
date : '周一'
}
] ,
dataSource : [ ]
}
} ,
mounted ( ) {
this . dataSource = this . convertData ( this . datas)
console. log ( ' this.dataSource : ' , this . dataSource) ;
} ,
methods : {
dateRender ( value, row, index ) {
return {
children : value,
attrs : {
rowSpan : row. dateRowSpan
} ,
} ;
} ,
convertData ( arr, levelIndex = 0 ) {
const levelKey = this . sortLevel
const key = levelKey[ levelIndex]
let groupObj = this . groupBy ( arr, key) || { } ;
Object. keys ( groupObj) . forEach ( groupKey => {
if ( levelIndex < levelKey. length - 1 ) {
groupObj[ groupKey] = this . convertData ( groupObj[ groupKey] , levelIndex + 1 )
}
groupObj[ groupKey] . forEach ( ( item, index, arr ) => {
item[ ` ${ key} RowSpan ` ] = index === 0 ? arr. length : 0
} )
} )
return Object. values ( groupObj) . flat ( )
} ,
groupBy ( arr = [ ] , key ) {
let obj = { }
arr. forEach ( item => {
const val = item[ key]
if ( ! obj[ val] ) {
obj[ val] = [ ]
}
obj[ val] . push ( item)
} )
return obj
} ,
} ,
}
< / script>
< style lang= "less" scoped> < / style> ` ` `