关于element-ui表格鼠标悬停背景颜色修改问题

7月前作者：cxx学习记录分类：Toy博客阅读(38) 违法举报

这篇具有很好参考价值的文章主要介绍了关于element-ui表格鼠标悬停背景颜色修改问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element-ui鼠标悬停时行背景色默认为白色，当表格字体为白色时容易看不到文字，因此需要修改鼠标悬停时的背景色。

html使用el-table后，在css样式中添加以下代码即可修改鼠标悬停后的背景色。(未使用scss和less)

.el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: #6495ED !important;
}

同时补充鼠标点击后行高亮颜色修改，需要在el-table标签内添加highlight-current-row开启高亮。随后在css中添加以下代码进行修改。文章来源地址https://www.toymoban.com/news/detail-511403.html

.current-row > td {
   background: #6495ED !important;
}

到了这里，关于关于element-ui表格鼠标悬停背景颜色修改问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

Element-UI中，按钮点击后松开鼠标颜色仍然聚焦的解决方法（纯css整体解决）

思路来自 Element-UI中，按钮点击后移开鼠标颜色仍然聚焦的解决方法（纯css整体解决）_27号白开水的博客-CSDN博客在使用element-ui的过程中，发现按钮点击后存在聚焦问题，即点击后移开鼠标，按钮颜色不变回原来的样式，而是会加上一个:focus的偏暗的样式，只有在别处点击

2024年01月21日
浏览(33)
element ui修改表格悬停色

第一种方法第二种方法注：第一种方法在右侧操作栏使用了固定后，操作栏的悬停色就无法改变了，可以使用第二种方法。其实在调试台可以看见，悬停时是给行加了一个hover-row的class名称。

2024年02月12日
浏览(79)
[element-ui] el-table表格头添加图标-鼠标移入显示el-tooltip提示信息

只是单纯的想在table中添加图标和tooltip 在el-table-column中绑定:render-header=“renderPrice” (此方法无法使tooltip换行) 方法二、使用组件插槽，elementui已封装好 elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息

2024年02月11日
浏览(33)
element-ui 表格el-table的列内容溢出省略显示，鼠标移上显示全部和定制样式

1、在对应列加上省略显示show-overflow-tooltip属性，如果加上这属性，鼠标移上还是没效果，要考滤是不是层级的原因，被其他挡住了。效果如下图： 2、定制样式：默认提示框主题色是黑色，如果想改成浅色和改变提示框的宽度，则需要加复盖样式：最后效果：

2024年02月13日
浏览(33)
elementui中table表格单元格背景、文字颜色修改（包含鼠标移入移出）

一、改变背景颜色 1、在el-table表头中添加属性：:cell-style=“addClass” （设置表头背景颜色:header-cell-style=“{ background: ‘#999999’, color: ‘#000’ }”） 2、data模拟假数据： 3、在methods中：二、鼠标移入改变背景、文字颜色 1、在el-table表头中添加属性：@cell-mouse-enter=“cellMouseEn

2024年02月03日
浏览(54)
修改element-ui主题颜色

方法1：创建一个公共的更改的CSS文件，在CSS文件里写入 $–color-primary:加颜色，最后在main.js中引入方法2：借助在线主题生成工具，设置自己想要的颜色，下载主题，解压之后，在main.js 中引入方法3：安装主题工具 1、安装主题工具 2、从 npm 安装theme 3、初始化变量文件 4、根

2024年02月11日
浏览(52)
element-ui 表格添加校验

html片段 js片段 css片段

2024年02月15日
浏览(37)
element-ui表格Table详解

先给大家展示一下效果 Table 属性属性名说明类型可选值默认值 data 显示的数据 array — — height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 s

2024年02月07日
浏览(35)
Element-ui 动态Table表格

最近在做相关需求，感觉太多的重复代码，网上也很多这种动态的，写的很好，所以我借鉴了很多大佬的动态table表格，结合需求，完成了我自己需要的table。 1.config文件夹相关配置文件 2.一个用来配置的’pageTable.vue’文件其实table 表格里面的align也可以动态，我这里偷懒了

2024年02月11日
浏览(31)
Vue+Element-ui实现表格嵌套表格（表头不同）

data中integrateList根据后端返回的json数据确定，其格式为：

2024年02月14日
浏览(56)