el-table stripe 双重表格时，斑马纹颜色错乱

最新推荐文章于 2024-05-15 14:58:44 发布
最新推荐文章于 2024-05-15 14:58:44 发布
阅读量3.3k 收藏 1
点赞数 1
分类专栏： 饿了么组件 文章标签： 饿了么组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuoliku/article/details/108365890
版权

在开发过程中遇到了这样一个问题，给表格组件加上了斑马纹，初看显示正常，但是但点击，斑马纹中的单元格，弹出另一个表格的时候发现界面效果变的很奇怪，如草图

正常显示效果，应为弹窗内表格亦是斑马纹，但是现在单击深色那一行出现的全部变成了同一个颜色，外层底色为白色的弹窗内表格显示正常。遇到这个一时之间还没想到是为啥会出现这种状态

然后就开始看css样式，乍一看还挺正常，隔行存在一个–striped class

最低0.47元/天 解锁文章
JINMINGIS
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui中 修改table表格隔行变色的样式
小柠檬爱编程
07-06 2205
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td { background-color: #233347; /*隔行变色*/ } 另一个色值设置在html上 <el-table :data="tableData" stripe ..
vue-stripe-elements:条纹元素的Vue包装器
05-06
@ kenkou / vue-stripe-elements 条纹元素的Vue包装器。 该库的灵感来自于 ，但具有以下改进： 无需先前设置stripe.js ：在运行时注入，当前为v3 。 如果已经配置，它也可以正常工作。 未定义自定义api：您可以...
el-table实现单元格合并，斑马纹错乱问题解决，鼠标上浮样式问题解决
yuishelly的博客
11-01 1201
el-table实现单元格合并，斑马纹错乱问题解决，鼠标上浮样式问题解决
vue中，el-table树形数据与懒加载——stripe斑马线 & row-key唯一标识id & lazy属性与加载函数load & default-expand-all之默认展开所有行
最新发布
weixin_44867717的博客
05-15 590
【代码】vue中，el-table树形数据与懒加载——stripe斑马线 & row-key唯一标识id & lazy属性与加载函数load & default-expand-all之默认展开所有行。
改变el-table表头的背景颜色以及表格隔行变色
m0_73154039的博客
06-16 3668
1. 改变表头背景颜色（直接设置 header-cell-style）
el-table样式错乱解决方案
qq_71214810的博客
01-19 1302
如图所示，又被提bug了，这个bug我都不知道改了多少次了。。。 图片右边的椭圆框住的地方，在页面放大缩小之后就对不齐了。
el-table 设置行背景颜色 鼠标移入高亮问题处理
我的博客
07-28 2891
注意，是.tableStyle.el-table 不是.tableStyle .el-table。2.2 :row-class-name=“tableRowClassName” 方式。2.3 :cell-style="cellStyle"方式。后端返回表格数据，有特定行数需要用颜色标识。4.2 第二种 设置类名 避免样式污染 推荐第二种。4.1 第一种直接设置。
ember-cli-stripe：Ember条纹签出
02-04
安装ember install ember-cli-stripe用法{{ stripe-checkout image = " /square-image.png " name = " Demo Site " description = " 2 widgets ($20.00) " amount = 2000 onToken = ( action " processStrip
dj-stripe：Django +简化条纹
02-05
dj-stripe为Django实现了所有Stripe模型。 设置您的Webhook端点并开始接收模型更新。 更新后，您将获得Django模型中所有可用的Stripe模型的副本！ 完整文档可。 产品特点 条纹芯 条纹计费 条纹卡（JS v2）和来源...
ember-stripe-elements：条纹元素的简单Ember包装器
02-04
将stripev3服务注入到控制器中，以便可以使用stripe对象上通常可用的功能（请参阅 ）： stripe.elements() stripe.createToken() stripe.createSource() stripe.createPaymentMethod() stripe.retrieveSource...
vxe-tablevue表格解决方案 v2.9.26
11-25
为您提供vxe-tablevue表格解决方案下载，vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...
element-ui 表格的斑马纹stripe属性与行状态属性冲突
qwerdfbs的博客
01-06 3188
在给elemet-uitable加行状态背景色时发现部分行始终不能加载行样式。 查找多次后发现在斑马纹表格的stripe属性与行状态属性冲突。 去除stripe属性后解决问题。
elementPlus-table 设置斑马纹背景颜色不生效问题
海带的博客
07-26 863
elementPlus-table 设置斑马纹背景颜色不生效问题
element table组件实现斑马线效果
qq_30907143的博客
03-06 1609
element table组件实现斑马线效果,表格颜色交错效果实现。
解决el-table 树形结构expand 操作后 stripe 显示失效问题
Sandy_zhi的博客
12-15 3076
昨天是挫败感较大的一天，因为好久没有真正的精进技术了，事件循环机制 、nextTick 之前条件反射都会想到的问题，昨天竟然被困住了。 问题背景 项目中用到了el-table的树形结构，table 设置了 stripe 栅格属性，但是由于有展开行，展开后table 按照展开后的所有数据进行了栅格设置，但当展开收起时，栅格的设置是没变的，会导致看上去有写地方栅格失效。如下图： 在ElementUI 文档看了el-table 的方法，没有什么可以设置的，项目中用的懒加载，数据也不在tableDa..
element 表格自定义斑马纹颜色
qq_61211119的博客
09-28 6548
element自定义斑马纹颜色
Element table 斑马线设置
热门推荐
Mr-k的博客
05-24 1万+
Element 斑马线是stripe 属性，自定义斑马线是 row-class-name，通过自定义属性实现个性斑马线如下 //CSS 样式添加 .el-table .warning-row{ background:#F3F9FF } //HTML table标签添加属性 <el-table :data="tableData" :row-class-name="tabRow...
element-ui table自定义斑马条纹颜色
qq_34169240的博客
10-28 1万+
1.el-table 加 :row-class-name="xxxTableRowClassName" 2.methods 中加方法 xxxTableRowClassName({row, rowIndex}) { if (rowIndex%2==0) { return 'statistics-warning-row'; } else { return ''; } }, 3.css中加样式 .el-table__row.statistics-warning-.
el-table stripe
02-29
el-table stripe 是 Element UI 中的一个表格组件，它可以给表格的行添加斑马纹样式，以提高表格的可读性和美观性。 stripe 属性是 el-table 组件的一个布尔类型属性，用于控制是否启用斑马纹样式。当 stripe 属性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值