坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › Ant-design-vue Table 自定义列斑马纹效果

Ant-design-vue Table 自定义列斑马纹效果

坚果大叔
2024-09-26 11:26:50技术阅读 2,784

业务需求

在使用 ant-design-vue 的 Table组件的时候,在某个业务模块的内因其承载的功能比较多,各个条件间界定不明显导致感官上十分的模糊,所以需要增加类似斑马纹的填充区分。

table组件自带只支持行的斑马纹而我们需要的是列的斑马纹。table 组件本身是不支持的所以只能通过其他方式来实现。

解决思路

官方提供了一个rowClassName的方法,可以自定义添加 class 来实现对表格不同样式的修改。但是尝试后发现还是只能更改行的样式,并不能改变列的样式。

我们要实现列的斑马纹要对每一行 tr 中 td 来设置不同的 class,而且涉及到有的列会被合并单元格,所以在设置的时候需要考虑的场景还比较多。

因为这个组件中 table 的 Column 是通过自定义的方式来显示的。因为每一列的表头都不一样,所以都是单独设置的。

解决方法

首先 table 的 Head 方面比较容易实现,直接在配置上添加 class 即可。

class: 'custom-column'

{
    title: 'name',
    dataIndex: 'gid',
    align: 'center',
    width: 120,
    class: 'even-row',
}

table 主体添加的方式在研究后其实也是非常的简单,直接通过customCell来根据不同的 index 设置 class 即可。

{
    title: '条件',
    dataIndex: 'index',
    class: 'even-row',
    customCell: (record, rowIndex, columnIndex) => {
      return { class: columnIndex % 2 === 0 ? 'even-row' : 'odd-row' };
    },
}

上面直接在customCell 中 return 返回 一个相同 class 即可,那么在每一行的这一列中的 td 都会加上相同的 class。如果按照上面的写法就是在同一列中不同行可以实现不同的样式。这个还是看个人的需求。

实现效果

通过上面的方法成功的实现了功能需求而且还可以扩展其他的样式。比如自定义列不同的样式实现多元化的展示。最终实现的效果如下。

Ant-design-vue Table 自定义列斑马纹效果-坚果大叔

赞赏 赞(1)
小米 note3 折腾记
上一篇
国庆假期的一些照片~
下一篇
在小程序中查看
搜你想看的
聚合文章
过去的,一点记录!
简单三步,让你玩转微信自动邀请加群!!!
小毛驴历险记
ES6入门之字符串的扩展
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
559 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
4,994 6 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
2,329 5 2
网页点击平滑滚动效果~
2024-10-17 16:43:08
2,031 4
1
  • 1
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢