您现在的位置是：网站首页> 编程资料编程资料

如何去掉ElementUI Table的hover变色问题_vue.js_

2023-05-24 282人已围观

简介 如何去掉ElementUI Table的hover变色问题_vue.js_

去掉ElementUI Table的hover变色

在自定义Element的时候，有一些自带特效我们不想要，去掉又不知道怎么去掉。

比如Table的hover变色。

其实方法并不是去掉，而是让他看起来不变。

开始↓定义单元格背景色：

定义单元格hover颜色：

 .el-table tbody tr:hover>td {             background-color:#f5f5f5 !important         }

其实就是让hover颜色跟背景色一样啊

用函数方法

:cell-style="setCellStyle"

函数方法为

setCellStyle({ row, column, rowIndex, columnIndex }) {         if (column.label === '当前列表头的名字') {           return "background:#e8e8e8;"//可以设置颜色或者边框         }         if (columnIndex === 4) {           return "background:#e8e8e8;"         } else {           return "background:#e8e8e8;"         }       }

ElementUI使用table时,取消鼠标点击、hover对某一行背景颜色变化

在使用ElementUI中的table时，往往会有这样的需求：针对某种状态对table表格中的某一行数据进行高亮显示，但同时又要取消鼠标点击事件和hover对高亮显示的行不受影响。

具体的高亮显示，官网中有文档介绍：可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

在这里插入图片描述

实例

颜色标记处理：

tableRowClassName({ row, rowIndex }) { if (row.sfjg == 1) { return "success-row"; } else if (row.sfjg == 0) { return "warning-row"; } else { return ""; } },

在全局样式中定义高亮颜色显示

/*列表的表头*/ .table-header-cell { background-color:#8bd2c2!important; color: #fff; font-weight: 400; } .el-table .success-row { background: #ffb707!important; } .el-table .warning-row { background: #def6f6; }

这样就完成了某一行的高亮显示，取消鼠标事件和hover对高亮显示的行影响，我的列表（只作为数据展示）是取消了highlight-current-row 是否要高亮当前行 这个属性，就正常了。

因为:row-class-name="tableRowClassName"在渲染表格的时候就调用了，不能用来响应点击事件改变行的颜色。

或者可以给表格增加:highlight-current-row属性，高亮显示当前行，然后通过修改css样式来改变颜色：

定义响应事件

.el-table__body tr.current-row>td { background: #ffb707!important; }

定义hover事件

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

改变不了就融入他们，在hover、鼠标点击事件时让他们的颜色与背景色一样就可以.

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：一文带你玩转JavaScript的箭头函数_javascript技巧_

下一篇：JS实现单例模式的N种方案_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网