Ant design of vue (表格相同数据动态合并) 出坑代码!

本文详细介绍了如何在Vue中使用Ant Design Vue表格进行动态数据合并,特别是列合并(rowSpan)的实现方法。重点讲解了表格的UI框架选择、数据结构以及在methods中声明和调用rowSpan方法,最后提到了customRender的使用来完成合并效果。
摘要由CSDN通过智能技术生成

蚂蚁金服的design Vue表格 动态合并代码详情!

你好!我们本次合并表格是实现的列 合并 rowSpan
在上代码 之前 我们先讲一下表格
Ui框架:
1、Vue
2、Ant design Vue

表格:
1、行是 colSpan
2、列是 rowSpan
design 表格的title 是不计算 索引的 !

我们开始贴图上代码,全部代码在文章末尾!

完成效果:
在这里插入图片描述

举例:我们以红框选中列做相同数据合并
在这里插入图片描述
1、Vue 展示 Ant table 代码
在这里插入图片描述
2、展示 data 数据
在这里插入图片描述
3、vue 导出代码
在这里插入图片描述
4、methods 方法里面实现 rowSpan
1、 注意 这里 key 是传值 声明方法的时候可以后写
2、使用的时候 在 mounted 里面调用即可
在这里插入图片描述
5、customRender 实现合并
在这里插入图片描述

代码部分:

<template>
  <a-table :columns="columns" :data-source="data" bordered>
    <template slot="nam
  • 7
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值