用的是vue2+ant-design-vue
但是vue3或者element-ui也是同理
先上效果
文章来源：https://www.toymoban.com/news/detail-516166.html
需要后端的数据将相同id的放在一起 否则也会有问题
例如：文章来源地址https://www.toymoban.com/news/detail-516166.html
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: [],
};
},
到了这里，关于vue表格实现一个简单的合并单元格功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
