ant-design-vue中table某一列进行合并

ant-design-vue中table某一列进行合并

1、在colums中配置自定义渲染

{title: '区域',dataIndex: 'cityName',key: 'cityName',align: 'center',width: 120,customCell: (record, rowIndex, column) => {return {rowSpan: record.rowSpan}}
},

2、处理请求来的数据

tableData.dataSource = processTableData(res?.data)
const processTableData = (data) => {let result = []let i = 0while (i < data?.length) {const currentItem = data[i]let rowSpan = 1while (i + rowSpan < data.length && data[i + rowSpan].cityName === currentItem.cityName) {rowSpan++}result.push({...currentItem,rowSpan})for (let j = 1; j < rowSpan; j++) {result.push({...data[i + j],rowSpan: 0})}i += rowSpan}return result
}