位置: IT常识 - 正文

(element-ui)取消el-table的hover状态,取消高亮显示(element ui停止)

编辑:rootadmin
(element-ui)取消el-table的hover状态,取消高亮显示 文章目录前言方法一 ------覆盖css样式方法二------卸载掉背景颜色(类似于方法一)方法三------使用函数方法方法四------禁用鼠标悬浮怎么办?究极解决------将错就错前言

推荐整理分享(element-ui)取消el-table的hover状态,取消高亮显示(element ui停止),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:element ui停止,elementui停更,element table取消选中,elementui取消表格选中,elementui删除功能,element ui tree 取消选中,elementui取消表格选中,element.style怎么取消,内容如对您有帮助,希望把文章链接给更多的朋友!

在使用element-ui的el-table表格的过程中,会发现,虽然框架的表格很好用很方便,emmmm,确实很好用,但是有一些烦人的甲方却不想要,table的浮现效果,特别是,单独给单元格设置了背景颜色之后,这个hover状态会覆盖掉自定义的单元格的背景颜色,是不是很烦人,是不是很抓狂,我也是从网上搜罗了一大串的解决方法,这边就一一做一下总结。

方法一 ------覆盖css样式

使用css覆盖的方法,修改掉他默认的hover状态的颜色。例如:

.el-table tbody tr:hover>td { background-color:#f5f5f5 !important //修改成自己想要的颜色即可 }

或者

.el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{ background-color: #f5f5f5 !important; }

但是这个方法显而易见,只支持修改一种颜色,像如下这种情况就不能使用 由于列有背景颜色的缘故,修改css样式的话,显然当鼠标hover上去的时候,有颜色的单元格还是会被覆盖掉原来的颜色! 所以这种方法只适用于背景颜色统一的表格!

方法二------卸载掉背景颜色(类似于方法一)(element-ui)取消el-table的hover状态,取消高亮显示(element ui停止)

代码如下(示例):

.el-table tbody tr:hover>td { background-color:unset !important //修改成自己想要的颜色即可 }

或者

.el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{ background-color:unset !important; }方法三------使用函数方法

在el-tavle中加入如下属性,强制让单元格渲染成固定颜色,这个方法也可取,但是遇到需要变色的单元格,显然就使用不了,问题显然又回到了方法一的缺陷之中去了。 但在单一背景色的表格中可取!!!

:cell-style="{background: 'revert'}"方法四------禁用鼠标悬浮

将所有事件禁用,虽然不会触发el-table的hover效果,也支持不同颜色的单元格,BUT!! !!!这种方法将导致表格的点击事件无法使用,例如表格最后一列的一些弹窗、或者一些删除、修改或者添加等操作将无法使用!!!

.el-table tbody tr { pointer-events: none; }

这种方法最为鸡肋,最不推荐!!!

怎么办?

就以为到这了吗??? 其实这些方法都是大多数网友总结的,但是都满足不了我的业务需求。 要么自己重写一个table表格,复刻一个el-table??? 只能说!! 懒人一个不想去码这么代码,况且element-ui已经封装的非常完美了,并且大多数的需求也已经满足了,所以这种想法不现实!! 跟甲方说做不了?好像也不现实,毕竟是开发人员。。。。 偶然间看到浏览器控制台的样式警告,陷入了深思,好像这种方法可行!! 将错就错!!!!!!

究极解决------将错就错

我们在控制台查看我们属性写错,或者参数写错的时候都会出现如下的警告并且这种警告的颜色在网页里面是不生效的,根据这个思路,我们无非就是不想要他的hover颜色展现出来 看到这里我一下豁然开朗!! 咱要不写个错的样式,覆盖掉原有的hover样式试了一下果真就成了好吧!! 这个是自我琢磨出来的,看起来挺傻逼,但是目前也能用,废话不说附上代码!!

.noneHoveTable .el-table__body tr.hover-row.current-row>td.el-table__cell, .noneHoveTable .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .noneHoveTable .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .noneHoveTable .el-table__body tr.hover-row>td.el-table__cell{ background-color: a !important; }

这里我自定义了类名noneHoveTable只要不需要hover状态的表格,加入这个类名即可,效果如下 这样设置之后就不在会用hover状态的出现!!! 如果广大网友有更好的取消hover状态的方法,欢迎在底下留言!!! 我这个也是没有办法的办法!害

本文链接地址:https://www.jiuchutong.com/zhishi/295989.html 转载请保留说明!

上一篇:如何解决Vue3没有代码提示问题?

下一篇:js字符串(js字符串截取)

  • 什么公司需要缴纳印花税
  • 私营独资企业交个税还是企税
  • 计提印花税会计
  • 什么叫抵扣进项
  • 企业股东分红怎么交税
  • 税收保全措施有金银首饰吗
  • 增值税专用发票使用规定 最新
  • 取得虚开普票怎样补增值税
  • 收取租车押金怎么做会计分录
  • 财务专用章的重要性
  • 财务软件续费怎么记账
  • 中药饮片增值税税率
  • 半成品委托加工费计入成本还是费用
  • 无形资产除了专利还有什么
  • 企业用商业汇票支付购货款
  • 交易性金融资产的交易费用计入哪里
  • 社保和公积金缴费基数怎么算
  • 房产税每次申报都要维护吗
  • 转让法人要注意什么
  • 旅游企业小规模纳税人差额征收
  • 税控盘280减免代码
  • 如何理解消费税的作用
  • 预缴所得税需要结转吗
  • 价外费用的会计和税务处理
  • 设计费计入成本
  • 工程施工科目核算
  • 跨年度专用发票如何开红字发票
  • 增值税即征即退会计处理
  • 失去胜诉权但又有起诉权是什么意思
  • 应收账款坏账收回会计处理
  • 华为授权查询系统
  • 固定资产的处理方法
  • 承租人对经营租赁和融资租赁会计处理方式
  • 应纳税所得税计算公式
  • 竣工结算的依据有哪些?
  • 小米mini路由器mesh
  • 购买房屋用于出租算投资房吗
  • php get函数
  • php timeout
  • 实收资本和注册资本不一致的会计处理
  • html该怎么学
  • 超市购物增值税怎么算
  • php读取文件
  • c++~怎么用
  • php实现计算百度百科
  • 收到投资款投资人怎么感谢
  • 六自由度机器人简图
  • uniapp零基础小白到项目实战
  • ntpq命令详解
  • java查询mongodb数据
  • 增值税发票记账联用途
  • 职工福利费允许扣除比例
  • sqlserver2008触发器语法
  • 转出未交增值税借方余额怎么处理
  • 第三季度利润
  • 客户赔偿款计入成本吗
  • 应交税费中应交税金包含个税吗
  • 什么叫误餐费
  • 多缴附加税款账务处理
  • 会计师事务所工作怎么样
  • 预付账款的账务处理例题
  • 产成品核算的内容
  • 目前默认系统%1
  • win8任务管理器在哪
  • xp系统连接共享文件夹
  • 盘符在哪
  • Windows Server 2008系统10个意外惊喜
  • 更新版本
  • wp_official_1.1.3.apk软件下载
  • centos 操作日志
  • windows10的开始菜单
  • linux中su切换用户不成功
  • xml文件网络传输
  • jQuery+ajax实现文章点赞功能的方法
  • html5游戏引擎排行
  • js实现vue
  • 基础的十进制按什么来算
  • 福建地税办税人变更流程
  • 税务总局转变税收征管方式
  • 契税纳税申报表在哪里拿
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设