用的是vue2+ant-design-vue
但是vue3或者element-ui也是同理
先上效果
需要后端的数据将相同id的放在一起 否则也会有问题
例如：
this.list = [{id: 1,name: '舟山接收站',...}{id: 2,name: '舟山接收站碳中和LNG',...},{id: 2,name: '舟山接收站碳中和LNG',...}
]
// this.list为表格的数据 替换成自己的即可
renderContent(value, row, index) {const obj = {children: value,attrs: {},};// 是否有相同气源地 有多少个则合并多少行// rowSpan合并行 colSpan合并列const count = this.list.filter(item => item.id === row.id).length;// if (count > 1) {obj.attrs.rowSpan = count;// }// 是否和上一个相同 相同rowSpan为0 即不显示if (index > 0) {if (this.list[index - 1].id === row.id) {obj.attrs.rowSpan = 0;}}return obj;},
data() {return {historycolumns: [{title: '气源地',key: 'name',dataIndex: 'name',width: 120,align: 'center',customRender: this.renderContent,},],list: [],};
},
