a-table的斑马纹以及hover样式的修改（vue2）

沙子迷了蜗牛眼

已于 2023-09-01 10:47:01 修改

阅读量1.1k

点赞数 2

文章标签： css vue.js 前端

于 2022-11-20 11:26:24 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73008551/article/details/127946946

版权

本文介绍如何为 Vue2 的 Ant 组件库中的 Table 组件添加斑马纹样式。通过 CSS 实现简单快捷的方法，使表格更具可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于官网ant组件里vue2的table组件里并没有修改成为斑马纹的APL直接方法，所以我们可以使用css进行设计，我这是直接使用css进行修改，方便快捷，菜鸡小白。大佬勿喷

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

沙子迷了蜗牛眼

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【前端】可视化大屏项目中Antd的table组件实现自动滚动和自定义斑马纹颜色

weixin_49102222的博客

04-26

1186

大家可能对有些方法的使用不是很清楚，我简单做下解释：1、在写滚动逻辑的时候，用到了xxx.scrollBy()的方法，这个方法是JavaScript中window对象的一种方法，可以在获取某个容器之后，指定像素数目，让其以指定的像素数目滚动窗口的内容。2、在对表格的样式进行更改的时候，用到了:deep()深度选择器。

【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线

热门推荐

Sabrina_cc的博客

04-25

3万+

【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线

参与评论您还未登录，请先登录后发表或查看评论

漂亮的斑马纹table表格(基于JQuery斑马纹表格)

12-16

一个简单的斑马纹表格，通过IE6/7/8、firefox、opera等浏览器测试。如果页面上有大量的表格数据时，隔行变色的斑马纹，基于jquery中的强大的选择器nth-child，以及addClass向表格中添加css样式制作的DEMO。漂亮的斑马纹table表格(基于JQuery斑马纹表格)demo的特点简单易用，代码中有简单的注释，下载即可用。提示， jquery 与mootools存在一定的冲突，jquery与mootools混合的环境未测试过，不一定保证可正常使用

【vue】a-table的斑马纹以及hover样式的修改：

SunPeng的博客

11-27

1097

【vue】a-table的斑马纹以及hover样式的修改：

Ant Design of Vue中a-table组件斑马线

恋雨烟梦

10-07

1270

Ant Design of Vue a-table 斑马线

Vue Ant Design Vue table customCell 设置单元格属性（带斑马纹） - 附完整示例

m0_48968874的博客

12-11

3286

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.jsAnt Design Vue — An enterprise-class UI components based on Ant Design and Vue.jsAn enterprise-class UI components based on Ant Design and Vuehttps://3x.antdv.com/components/t

elementplus el-table 斑马纹背景色半透明

最新发布

03-16

嗯，用户想实现Element Plus的el-table组件斑马纹背景色，并且颜色是半透明的。首先，我需要回忆一下Element Plus的表格组件样式设置方法。通常，斑马纹效果可以通过设置stripe属性为true来实现，但默认的颜色可能...

el-table样式

qq_43840793的博客

11-01

1016

其中样式frameBordStyle是深色背景框，不负责表格样式，表格样式由tableStyle负责。1、实现效果，外部框是蓝绿色边框，深色背景，里面的表格首先设置透明色，然后应用自定义斑马纹。里写下行样式函数，奇数行与偶数行运用不同样式。

``` stripe ```el-table 包含属性stripe和el-table-column属性为fixed的列，如何自定义这样列表的斑马纹颜色，鼠标移入颜色和选中颜色

10-25

如果你想让斑马纹颜色根据某种条件变化，可以在你的Vue组件中动态设置这些样式。比如基于数据中的某个字段： ```html <el-table :data="tableData" stripe> <el-table-column prop="column1" :class="{ 'even':...

封装el-table表格及组件内如何使用

小柠檬爱编程

09-16

638

1.封装el-table组件代码,可直接复制使用 <template> <div class="table"> <el-table v-loading="loading" :data="dataSource" ref="mutipleTable" :header-cell-style="{'text-align':'center'}" border @se

ant design vue给table设置斑马条纹样式

cy1502的博客

02-22

5530

效果图 <a-table :columns="columns" :data-source="data"></a-table> css设置： <style lang="less" scoped> /* 表格斑马样式 **/ /deep/.ant-table-tbody tr:nth-child(2n) { background-color:#fafafa; } </style> js设置：参考链接：https://blog.csdn.net/yorc

antd table斑马线

u010234868的专栏

07-22

750

在Ant Design的Table组件中，要实现斑马线效果（即行之间的间隔样式），可以通过自定义rowClassName属性来实现。这样，表格中偶数行和奇数行将有不同的背景色，从而形成斑马线效果。可以根据需要自定义行的样式。

antd-vue table里hover行背景色修改

马娟的博客

09-06

1339

//没有固定的hover颜色修改 .ant-table-tbody{ tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover > td { background-color: @background-color-light; } } //有固定向左向右的hover颜色修改 .ant-table-fixed{ .ant-table-r...

修改antd vue组件a-table的默认样式

李酒酒的博客

11-10

7812

antd vue的组件固然简单好用，但是其默认样式有时是并不符合我们的需求的，我在开发过程中遇到一个问题： a-table表格padding过宽如图所示而我需要将这个表格进行打印，因此需要在保证样式美观的同时最大限度地利用纸张，所以我想把padding调小一点，这里就用到了vue的样式穿透。 <a-table class="AStockOutDetailTable" style="margin-top: -5px;"

iview table 斑马纹修改样式

weixin_43657954的博客

11-09

795

iview table斑马纹样式修改

Antd 修改 a-table 悬浮颜色、表头背景色

m0_67021283的博客

12-01

3275

antd-vue

修改antd-vue a-table的悬浮颜色

刻痕

12-29

1464

使用 /deep/ 或者!important 都没效果，使用如下样式。修改antd-vue a-table的悬浮颜色。

ant-vue中a-table去除鼠标悬停背景色

m0_37583718的博客

04-03

7677

问题使用a-table的时候，会发现鼠标移到某行，某行就会高亮或有背景色填充。那怎么去掉这个效果呢？解决添加以下CSS即可： deep/ table tbody tr:hover>td { background-color:#ffffff!important } ...

antd组件自定义table单元格内容样式

有问题可关注公众号：前端研究院后台输入问题回复

06-29

2760

效果判断数据的值修改显示字体的颜色在使用 columns 时，可以通过scopedSlots属性配置支持 slot-scope 的属性。 <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500,y:400}" rowKey="序号"> <div slot="日常剔除比例" slot-scope="text" style="color: red;" v-if=" text > 13">