关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题

table 鼠标悬停时高亮背景颜色的修改

.el-table tbody tr:hover>td { background-color: #颜色 } 或 .el-table__body-wrapper tbody tr:hover>td{ background-color: #颜色 } 就可以了

如果添加了fixed 上面设置的鼠标悬浮颜色可能一部分无效了
原因是：
我们先看一下elements的设置前后结构变化对比;主要看 el-table__body-wrapper
设置前

设置后（我设置的fixed='left' 和 fixed="right"）

可以看出多出了绿色框中的内容，再去看看绿色框中的内容就是固定的列；
所以原因很明显了，我们之前只是设置了.el-table__body-wrapper 的浮动颜色

解决方法1：继续添加css

// 如果使用了stripe斑马纹可能需要加!important
.el-table__fixed tbody tr:hover>td { //左边固定
background-color: #颜色;
}
.el-table__fixed-right tbody tr:hover>td { //右边固定
background-color: #颜色;
}
1
2
3
4
5
6
7
解决方法2：经1楼指教第二种解决方法更加完美

// 如果使用了stripe斑马纹可能需要加!important
   .el-table__body .el-table__row.hover-row td{
      background-color: #颜色;
   }

关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题相关推荐

Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
背景图片用css能隐藏吗,用css实现鼠标悬停时隐藏背景图片的问题
用css实现鼠标悬停在导航文字连接上时隐藏导航的背景图片为什么我的鼠标悬停在导航上时,背景图片还在啊? css代码如下: body{ margin:0; padding:0; background: ...
Element ui中table标签上下滚动时表格错位
在style中加 /deep/.el-table__fixed-body-wrapper .el-table__body {padding-bottom: 20px; }
element ui中table合并相同内容单元格
一.遍历需要合并的集合,定义spanArr数组二.在table中增加事件三.调用objectSpanMethod方法,合并单元格
element UI中table操作栏更多按钮展示与折叠的实现
1.然后给大家看下动态图 2.解决思路: 一开始我的第一反应就是可以手写一个定位布局来点击弹出更多按钮弹框,后面看了下elementUI文档上有个组件可以利用,那就是Popover 弹出框废话不 ...
Web前端笔记-element ui中table中禁止换行，使用...进行省略
效果是这样的: 这里就记录下操作添加一个CSS如下: a.TestCSS{-webkit-line-clamp: 1;overflow: hidden;display: -webkit-box;-w ...
Element UI 中table的验证
<el-table class='product_table' :data="productData" border><el-table-column prop= ...
《Unity开发实战》——3.9节鼠标悬停时高亮显示材质
本节书摘来自华章社区<Unity开发实战>一书中的第3章,第3.9节鼠标悬停时高亮显示材质,作者 (爱尔兰)Matt Smith (巴西)Chico Queiroz,更多章节内容可以访问云 ...

关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题

关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题相关推荐

最新文章

热门文章