修改 element ui table hover时的背景色

最新推荐文章于 2024-07-30 13:14:23 发布
最新推荐文章于 2024-07-30 13:14:23 发布
阅读量5.3k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunny_lss/article/details/89189447
版权

开始百度了很多方法 发现都不管用 后来 在hover 每一行tr 时发现 

这里有它的 颜色 

然后我就 在对应的子组件里写这个 样式  修改颜色 不生效 加上 ！important   也没用  ui 给的颜色又不是这样的 

 

后来我发现 这个修改样式 要么外面不套 任何父元素 要么就套在 最外层的父元素下

 这是我看到 下面那行 .allMyModel .el-table--border (这里面的样式是我自己写的 它生效了 ） 然后 我把对应的修改颜色的代码拿到 .allMyModel 下面 就生效了 

 

 

 

 样式修改就搞定啦 

一定记得 在最大的父元素下 写修改样式 

sunny_lss
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element-ui 表格实现单元格可编辑的示例
08-27
在本示例中，我们还实现了鼠标 hover 效果，当用户鼠标 hover 到某个单元格上时，我们将改变该单元格的背景颜色。 样式设置 在本示例中，我们使用了 CSS 来设置编辑框和图标的样式，我们使用 `.cell-edit-input` ...
vue2 element ui 修改table表格的背景颜色和悬浮颜色
程小博衍的博客
01-08 1503
【代码】vue2 element ui 修改table表格的背景颜色和悬浮颜色。
vue3 + element-plus 修改 el-table 鼠标悬停背景、斑马纹颜色、表头颜色
Turn_to_empty的博客
03-13 6948
vue3修改 element-plus el-table 鼠标悬停、斑马纹及表头等样式
el-table样式修改（背景色、hover背景色，文字）
最新发布
m0_54526018的博客
07-30 594
【代码】el-table样式修改（背景色、hover背景色，文字）
教你如何去掉ElementUI Table的hover变色
热门推荐
lsy1162526799的博客
06-01 1万+
在自定义Element的时候，有一些自带特效我们不想要，去掉又不知道怎么去掉。 比如Table的hover变色。 其实方法并不是去掉，而是让他看起来不变。 开始↓定义单元格背景色： <el-table :cell-style="{background:'#f5f5f5'}" > 定义单元格hover颜色： .el-table tbody tr:hover>td { background-color:#f5f5f5 !important }
elementUI修改单元格、行背景色，
zhengyun1568的博客
12-18 4823
修改单元格背景色cell-style，修改行背景色row-style <template> <el-table :data="tableData" :cell-style="TableCellStyle" :row-style="TableRowStyle" border style="width: 100%"> <...
如何给基于Element-UI的表格添加背景颜色
weixin_45681173的博客
06-01 5999
小菜鸡记录一下学习到的知识，如有错误欢迎指正根据项目的要求给相对应的行填加背景颜色和设置字体样式。代码如下（示例）： 第一种实现方式： 第二种实现方式： 2.js实现代码 代码如下（示例）： 第一种实现方式： 第二种实现方式： 3.css实现代码 总结 调用row-class-name方法，行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
element-UI 点击一行，背景色变化
zhongmei121的专栏
08-10 1万+
&lt;el-table :data="data" :row-class-name="tableRowClassName" //给这一行加类 :row-style="selectedHighlight" //设置这一行的样式 @row-click="rowClick" //单击时调用的函数 &gt; &lt;/el-table&gt; &lt;script&gt;
TABLE滚动条
05-26
- `-webkit-scrollbar-thumb` 用于定义滚动条的滑块部分，可以设置颜色、背景、边框等样式。 - `-webkit-scrollbar-thumb:hover` 和 `-webkit-scrollbar-thumb:active` 可以分别定义滑块在鼠标悬停和按下时的样式...
斑马线实现
06-05
// 鼠标悬停时更改背景色 $("#mytable tr").hover( function() { $(this).removeClass().addClass("rollelement"); }, function() { var index = $(this).index(); if (index % 2 == 0) { $(this)....
前端开发笔记.docx
08-21
样式属性包括颜色、字体、边距、填充、背景等，而值可以是颜色、长度、百分比等。通过媒体查询（`@media`），我们可以创建响应式布局，使页面在不同设备和屏幕尺寸下都能适应。 3. JavaScript： JavaScript是实现...
Tapestry字典0.1.pdf
09-24
- **实现**: 通过CSS选择器来改变交互时的背景色。 - **示例**: `tr:hover { background-color: #f0f0f0; }` **5.3 使用tapestry-Contrib.library** - **实现**: 使用社区贡献的库来扩展功能。 - **示例**: 添加...
element-table中当点击row的时候背景色发生
xiaojie的博客
10-08 1056
element-table中当点击row的时候背景色发生
修改Element UI 中 table 表格鼠标经过某一行的背景色
cold__ice的博客
04-03 563
粘贴以下代码，background-color换成你要的颜色即可。/* 表格行鼠标经过颜色 */
element-ui table组件中Table Events使用
莫不静好
04-10 4704
文章目录页面效果table组件设置hover时背景颜色一、直接修改css样式二、配合cell-mouse-enter cell-mouse-leave使用Table Events 使用说明实现methods中html中 页面效果 鼠标hover时显示当前行下可编辑的元素 table组件设置hover时背景颜色 一、直接修改css样式 .el-table .el-table__body tr:ho...
vue3 - Element Plus 切换主题色及el-button hover颜色不生效的解决方法
iotjin的专栏
09-20 1702
按文档中设置大部分颜色也会根据设置的颜色改变，但是有部分颜色不生效，比如按钮hover时的颜色还是默认的颜色。这是因为主题色由以下图片的颜色决定的，要修改下面所有的颜色才行。
Vue+ELement UI el-table移入或选中某行时改变颜色
蓝胖子的博客
03-26 1849
Vue+ELement UI el-table移入或选中某行时改变颜色
element 使用:cell-style改变行背景颜色
qq_43030908的博客
02-14 3940
<el-table :data="tableData" border stripe :cell-style="cellStyle" style="width: 100%" > cellStyle({ row, rowIndex }) { if (row.signUser == 'undefined' || !row.signUser) { return } if (row.signUser.name == '紧急') { retur.
element-plus el-table 点击单行修改背景色
xiamoziqian的博客
02-20 7152
element-plus el-table 点击单行修改背景色
element ui 表格移入背景颜色
07-29
要在 Element UI 表格中实现移入时的背景颜色变化，你可以使用 CSS 的 `:hover` 伪类选择器来设置背景颜色。下面是一个示例： ```html <el-table> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <!-- 其他表格列 --> </el-table> <style> .el-table__row:hover { background-color: #f5f7fa; /* 设置移入时的背景颜色 */ } </style> ``` 在上面的示例中，我们使用了 `.el-table__row:hover` 选择器来选择表格的行元素，并设置了 `background-color` 属性来改变背景颜色。你可以根据需要调整颜色值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值