位置: 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字符串截取)

  • 捕鱼达人游戏需要花钱吗(扑鱼达人游戏)(捕鱼达人游戏是怎样的机制)

    捕鱼达人游戏需要花钱吗(扑鱼达人游戏)(捕鱼达人游戏是怎样的机制)

  • 苹果13边框是什么材质(苹果13边框是什么形状)

    苹果13边框是什么材质(苹果13边框是什么形状)

  • 苹果x有红外线遥控功能吗(苹果xs带红外线功能吗)

    苹果x有红外线遥控功能吗(苹果xs带红外线功能吗)

  • 淘宝店铺级别的等级划分(淘宝店铺级别的层级划分)

    淘宝店铺级别的等级划分(淘宝店铺级别的层级划分)

  • 电脑热键冲突怎么修改(电脑出现热键冲突是怎么回事)

    电脑热键冲突怎么修改(电脑出现热键冲突是怎么回事)

  • 八芯网线是几类网线(八芯网线是什么意思)

    八芯网线是几类网线(八芯网线是什么意思)

  • 苹果手机可以跑闪送吗(苹果手机可以跑滴滴代驾吗)

    苹果手机可以跑闪送吗(苹果手机可以跑滴滴代驾吗)

  • mla_al10是华为什么型号(华为mla-al10参数)

    mla_al10是华为什么型号(华为mla-al10参数)

  • 手机qq临时会话恢复(手机qq临时会话框删掉了怎么恢复)

    手机qq临时会话恢复(手机qq临时会话框删掉了怎么恢复)

  • 电信光猫千兆口灯不亮(电信光猫千兆口是哪个)

    电信光猫千兆口灯不亮(电信光猫千兆口是哪个)

  • 扫描版和电子版有什么区别(扫描版和电子版有什么区别扫描文件打开乱码)

    扫描版和电子版有什么区别(扫描版和电子版有什么区别扫描文件打开乱码)

  • 钉钉有回放吗(钉钉有回放嘛)

    钉钉有回放吗(钉钉有回放嘛)

  • qq限时聊天怎么没了(qq限时怎么改)

    qq限时聊天怎么没了(qq限时怎么改)

  • 电脑中病毒怎么办(电脑中病毒怎么弄)

    电脑中病毒怎么办(电脑中病毒怎么弄)

  • 抖音dou投放好友知道吗(抖音投放对象)

    抖音dou投放好友知道吗(抖音投放对象)

  • 手机发视频对方听不见声音(手机发视频对方听不到声音)

    手机发视频对方听不见声音(手机发视频对方听不到声音)

  • 华为nova5pro声音突然变小(华为nova5pro声音忽大忽小)

    华为nova5pro声音突然变小(华为nova5pro声音忽大忽小)

  • 如何分辨mad和amv(mav和mad的区别)

    如何分辨mad和amv(mav和mad的区别)

  • 天猫精灵能下载东西吗(天猫精灵能下载钉钉上网课吗)

    天猫精灵能下载东西吗(天猫精灵能下载钉钉上网课吗)

  • oppo reno ace是5g么(reno ace 5g版)

    oppo reno ace是5g么(reno ace 5g版)

  • 苹果手机充一晚上电对手机有影响吗(苹果手机充一晚上电没充满什么原因)

    苹果手机充一晚上电对手机有影响吗(苹果手机充一晚上电没充满什么原因)

  • 小米怎么卸载小爱(小米怎么卸载小部件)

    小米怎么卸载小爱(小米怎么卸载小部件)

  • 华为p30什么时候上市的(华为p30什么时候升级鸿蒙3.0)

    华为p30什么时候上市的(华为p30什么时候升级鸿蒙3.0)

  • 台式电脑c盘怎么清理(台式电脑C盘怎么扩大)

    台式电脑c盘怎么清理(台式电脑C盘怎么扩大)

  • 坚持的反义词是什么(坚持的反义词是什么 标准答案)

    坚持的反义词是什么(坚持的反义词是什么 标准答案)

  • 怎样把余额宝收益清零(怎样把余额宝收益的钱转出)

    怎样把余额宝收益清零(怎样把余额宝收益的钱转出)

  • iQOO Neo的机身厚度(iqooneo5手机厚度)

    iQOO Neo的机身厚度(iqooneo5手机厚度)

  • 笔记本任务栏怎么调整到屏幕下面(笔记本任务栏怎么调整大小)

    笔记本任务栏怎么调整到屏幕下面(笔记本任务栏怎么调整大小)

  • 手机号怎么开通腾讯视频会员(手机号怎么开通短信功能)

    手机号怎么开通腾讯视频会员(手机号怎么开通短信功能)

  • ppt副标题不可见(设置ppt副标题可见)

    ppt副标题不可见(设置ppt副标题可见)

  • 重置IE浏览器(重置ie浏览器会有什么影响)

    重置IE浏览器(重置ie浏览器会有什么影响)

  • 核定征收企业所得税率是多少
  • 企业所得税税前扣除管理办法
  • 税前扣除什么意思
  • 企业进口葡萄酒也要缴纳消费税吗
  • 银行承兑汇票相当于贷款
  • 增值税减免税申报明细表免税代码和名称
  • 购入固定资产入账
  • 幼儿园收费怎么说
  • 免费赠送货物出租合同
  • 增值税专票税种
  • 资产负债表日后调整事项与非调整事项的区别
  • 免费赠送物业费活动语句怎么写
  • 个体户国税异常怎么办
  • 建筑业附加税税率是多少
  • 预缴的企业所得税可以税前扣除吗
  • 企业所得税预缴政策
  • 季报资产负债表和利润表的勾稽关系
  • 营业部门人员工资用什么会计科目
  • 调整以前年度应付
  • 企业年金个税如何计提
  • 安装费要交税吗
  • 商业承兑到期兑不出来多久的追诉期
  • 电脑开wifi给手机用好吗
  • 销售回款率怎么计算
  • 发票如何认证及开票
  • 员工意外伤害保险怎么买
  • php获取远程文件数据
  • 拍卖公司收入计入什么分录
  • 补缴的耕地占用税怎么做账
  • 注册资金没有的怎么做账
  • 制造企业成本计算模型有哪些类型
  • 装修房子监理
  • 企业对员工罚款的法律依据
  • fetchall的用法
  • 社会保险个人部分计入什么科目
  • php单链表使用场景
  • 前端如何将项目分类
  • php设置header参数
  • php 微信公众号自定义菜单
  • series转换为dataframe
  • 出口信用保险补贴是否不征税收入
  • 金税盘怎么增加收款人和复核人
  • 现金管理的四个方面
  • 代收代付进项税转出吗
  • 盘盈材料会计分录
  • 购销合同交印花税吗怎么交
  • 个人注册公司是否可以免税
  • 大数据sql教程
  • 小规模纳税人免增值税的政策
  • 股权收购协议书实际案例
  • 资本公积转增资本要交税吗
  • 现金流量明细分类
  • 预付检测费未收到发票
  • 电费应收和实收怎么算
  • 在建工程账务处理会计分录
  • 退货销售折让会计分录
  • 车辆挂靠收取管理费怎么做账?
  • 企业的专利收费是多少
  • 民办幼儿园的经费投入
  • 进项税和销项税月末怎么结转
  • 税控盘和金税盘可以安装在一个电脑
  • 网上打印的电子机票可以报销不
  • 租赁车子
  • 总分类账建账顺序
  • 怎样填写记账凭证
  • 最新mysql数据库安装步骤
  • mysql怎么直接向表中写数据
  • win8开机错误
  • G40/50-70、SR1000随机Linux改安装Win7系统的实现方法
  • 计算机的硬盘
  • image driver
  • windows远程连接是什么协议
  • win8应用商店无法连接网络
  • cocos2dx 3.3 tilemap 缩放滑动并且准确点击对象
  • unity用visual
  • nodejs child_process
  • Python实现类似jQuery使用中的链式调用的示例
  • 重庆市国家税务局电话
  • 小规模纳税人需要进项票吗
  • 放管服中的服的深层含义
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设