效果图：
直接上代码（复制代码可直接使用）：
<template>
<a-table :columns="columns" :dataSource="dataSource" bordered> </a-table>
</template>
<script>
export default {
data() {
return {
dataSource: [
{
key: '1',
stationNo: '1-11',
shortName: '上海',
number: 12,
connectTime: '2023-01-22 23:23:24',
},
{
key: '2',
stationNo: '1-11',
shortName: '上海',
number: 12,
connectTime: '2023-01-22 23:23:27',
},
{
key: '3',
stationNo: '1-11',
shortName: '上海',
number: 12,
connectTime: '2023-01-22 23:23:28',
},
{
key: '4',
stationNo: '1-12',
shortName: '武汉',
number: 13,
connectTime: '2023-01-22 23:23:28',
}
],
columns: [
{
title: '期号',
align: 'center',
dataIndex: 'stationNo'
},
{
title: '地点',
align: 'center',
dataIndex: 'shortName',
customRender: (value, row, index) => {
return this.mergeCell(value, row, index)
}
},
{
title: '数量',
align: 'center',
dataIndex: 'number',
customRender: (value, row, index) => {
return this.mergeCell(value, row, index)
}
},
{
title: '时间',
align: 'center',
dataIndex: 'connectTime'
}
]
}
},
methods: {
// 合并单元格
mergeCell(value, row, index) {
// 满足要求需要合并的行中的第一行
const temp_Index = this.dataSource.findIndex(
record => record.shortName === row.shortName
)
// 需要合并的行数
const rowSpan = this.dataSource.filter(
record => record.shortName === row.shortName
).length
if (rowSpan > 1) {
// 要合并的行中的第一个（从这一行合并）
if (temp_Index === index) {
return {
children: value,
attrs: { rowSpan }
}
}
// 其他要合并的行都设rowSpan=0
return {
children: value,
attrs: { rowSpan: 0 }
}
}
return value
}
}
}
</script>
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
