vue表格实现一个简单的合并单元格功能

用的是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: [],
  };
},