效果图
一、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',
// customRender: renderContent,
},
],
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
},
};
},
// 获取需要合并数据的rowSpan
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)
}
// 计算rowSpan
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',
// customRender: renderContent,
},
],
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
},
};
},
// 获取需要合并数据的rowSpan
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)
}
// 计算rowSpan
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>```