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

  • qq群怎么看男女比例(qq群如何查看性别)

    qq群怎么看男女比例(qq群如何查看性别)

  • goodnotes怎么分屏做笔记(goodnotes怎么分屏写笔记)

    goodnotes怎么分屏做笔记(goodnotes怎么分屏写笔记)

  • ios13.4.1小白点不见了(苹果13.7小白点)

    ios13.4.1小白点不见了(苹果13.7小白点)

  • 手环怎么开机的(oppoband手环怎么开机)

    手环怎么开机的(oppoband手环怎么开机)

  • 注册微信好友辅助二维码过期怎么办(注册微信好友辅助验证)

    注册微信好友辅助二维码过期怎么办(注册微信好友辅助验证)

  • 淘宝主页怎么设置让别人看不到(淘宝主页怎么设置别人不可见)

    淘宝主页怎么设置让别人看不到(淘宝主页怎么设置别人不可见)

  • 抖音七天内怎么退出公会(抖音七天内怎么查看浏览记录呢)

    抖音七天内怎么退出公会(抖音七天内怎么查看浏览记录呢)

  • 抖音通讯录好友要互存号码吗(抖音通讯录好友怎么关闭)

    抖音通讯录好友要互存号码吗(抖音通讯录好友怎么关闭)

  • bilibili的视频怎么下载(bilibili的视频怎么保存到本地)

    bilibili的视频怎么下载(bilibili的视频怎么保存到本地)

  • 抖音传送门是什么意思(抖音传送门是什么原理)

    抖音传送门是什么意思(抖音传送门是什么原理)

  • oppoa11支持nfc功能吗(oppoa11能用nfc吗)

    oppoa11支持nfc功能吗(oppoa11能用nfc吗)

  • 朋友圈卡顿是什么原因(朋友圈太卡怎么办)

    朋友圈卡顿是什么原因(朋友圈太卡怎么办)

  • i7 7700hq能用几年(i7 7700hq支持多大内存)

    i7 7700hq能用几年(i7 7700hq支持多大内存)

  • oppoa5可以用5g网络吗(oppoa5支持5gwifi吗)

    oppoa5可以用5g网络吗(oppoa5支持5gwifi吗)

  • 手机充电线不是原装对手机有影响吗(手机充电线不是原装的)

    手机充电线不是原装对手机有影响吗(手机充电线不是原装的)

  • 手机记事本删除了怎么恢复(手机记事本删除了怎么找回来)

    手机记事本删除了怎么恢复(手机记事本删除了怎么找回来)

  • 怎么把商家收款码关闭(怎么把商家收款取消掉)

    怎么把商家收款码关闭(怎么把商家收款取消掉)

  • vivos1pro是闪充还是快充(vivos1pro充电器)

    vivos1pro是闪充还是快充(vivos1pro充电器)

  • win10第三方软件模糊(win10第三方软件无法使用摄像头)

    win10第三方软件模糊(win10第三方软件无法使用摄像头)

  • p0650故障码如何修理(p0655故障码)

    p0650故障码如何修理(p0655故障码)

  • word目录怎么自动生成(word目录怎么自动生成左对齐)

    word目录怎么自动生成(word目录怎么自动生成左对齐)

  • arm是什么(arm是什么牌子品牌)

    arm是什么(arm是什么牌子品牌)

  • 打开网页时显示已重置连接(打开网页时显示无法获取属性)

    打开网页时显示已重置连接(打开网页时显示无法获取属性)

  • 如何对Windows 7系统进行备份?(win7系统怎么操作)

    如何对Windows 7系统进行备份?(win7系统怎么操作)

  • 出口企业的退税属不属于纳税总额
  • 以前未入账固定资产补入账涉及的房产税
  • 工程产值是怎么计算的
  • 住房贷款专项扣除
  • 个税上个月没报下个月累计会怎么样
  • 季度应收账款周转天数是按多少天除
  • 什么叫税控盘清卡
  • 办理企业所得税退税
  • 公司 捐赠
  • 别人开业送的花怎么说
  • 企业债务重组损失的所得税前扣除
  • 分公司转总公司款分录
  • 租赁业务增值税纳税义务发生时间
  • 建筑行业增值税税率是多少
  • 公司领用自产产品建设厂房包括销项税
  • 外帐的倒推流程是什么
  • 科技研发政策
  • 退税勾选后怎么申报
  • 财务负责人必须是本公司员工吗
  • 发票勾选保存后不提交了能留到下月抵扣吗?
  • 上月没交社保本人能交吗
  • 登陆对话框不能输入
  • 核销后怎么反核销
  • 配股条件是什么意思
  • php生成php文件
  • cpu哪个型号性价比最高
  • 应付票据抵付应付账款
  • 诉讼费属于什么科目类别
  • 海关进口增值税怎么认证抵扣
  • 最高像素的手机
  • php语言标记风格有四种,分别是
  • 公司员工意外险,死亡能赔多少钱
  • PHP:iconv_strlen()的用法_iconv函数
  • 固定资产转让税金怎么算
  • 进口增值税采集
  • 阿里巴巴php
  • 报税扣款锁定怎么处理
  • js如何转换为数值型
  • 【Spring+SpringMVC+Mybatis】Spring+SpringMVC+Mybatis实现前端到后台完整项目
  • php web socket
  • 残疾人保证金如何做账
  • mongodb 安装
  • 所有者权益的确认依附于什么的确认
  • 制作海报属于什么行业
  • java实现打印
  • access自动保存
  • sql去除重复项
  • 补发以前年度工资怎么做账
  • 阶段性减免企业社保费实施政策对象
  • 现金发放工资有什么风险
  • 开票金额大于收入金额
  • 成本利润率多少是正常的
  • 一般纳税人只交社保无发票往来需要做账吗
  • 营改增 交通运输
  • 计提工资和发放工资的账务处理
  • 总分类账建账顺序
  • win7系统桌面图标设置
  • centos7怎么变成图形化界面
  • 重装系统的简写
  • windows7开始菜单不见了
  • 虚拟机里安装centos7
  • win7重装系统之后怎么还原系统
  • linux中ls命令的功能
  • windows10无法关闭
  • mac怎么共享打印机设备
  • centos创建一个文件
  • win10 outlook邮箱设置教程
  • pycharm怎么学
  • js获取当前日期并格式化
  • jquery 右键菜单
  • Node.js发送HTTP客户端请求并显示响应结果的方法示例
  • jquery中判断某个类是否存在的方法
  • windows and android
  • unity 3d教程
  • django 表单
  • linux给本地用户发邮件
  • Python的collections模块中的OrderedDict有序字典
  • 专票怎么查询已开记录
  • 绿牌电动车需要过户吗?
  • 重庆两江新区总工会社会化工作者待遇
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设