Antd table表格隔行变色

最新推荐文章于 2022-11-04 16:26:16 发布

zhengTornado

最新推荐文章于 2022-11-04 16:26:16 发布

阅读量2.6k

点赞数 1

分类专栏：大前端文章标签： html css vue javascript

本文链接：https://blog.csdn.net/zhengtornado/article/details/118933074

版权

大前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用Ant Design框架中的`<a-table>`组件实现表格隔行变色的效果。通过设置`rowClassName`属性结合CSS样式，实现了数据源中的行交替颜色展示。此外，还讨论了相关CSS样式的应用，帮助开发者提升前端界面的视觉体验。

摘要由CSDN通过智能技术生成

效果展示

在这里插入图片描述

  <div class="high-table">
            <a-table
                ref="table"
                size="middle"
                bordered
                :showHeader="false"
                :columns="columnsHP"
                :dataSource="dataSourceHP"
                :pagination="false"
                :loading="loading"
                :rowClassName="(record, index) => ( index % 2 === 1 ? tableColorOne : tableColorTwo)"
                class="j-table-force-nowrap">
            </a-table>
          </div>