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

  • 小规模纳税人如何计算增值税
  • 一般纳税人做账流程图
  • 单位购买理财产品需要什么手续
  • 个人劳务费的免税政策
  • 公允价值下降属于资产吗
  • 营业费用和管理费用比较
  • 结算金额和付款金额
  • 货架折旧年限
  • 属于劳务分包合同
  • 工业企业员工工资占收入比例
  • 委托开发费用免所得税和增值税
  • 个体工商户需要缴纳哪些税
  • 以前年度取得假发票账务处理
  • 大额存款提前取一部分怎么计息
  • 装修费可以一次性计入费用吗
  • 发票报销哪些能用专票
  • 企业所得税属于什么科目
  • 餐饮企业卖套餐赠送单品要交增值税吗?
  • 小规模企业所得税标准
  • 查土地补贴到啥单位查明
  • 所得税税负率是多少
  • 资本收益率的计算公式净资产收益率
  • 小规模免增值税印花税用交吗
  • 比赛奖金支出计入什么科目
  • 计提专项借款本月利息会计分录
  • 低于账面价值出售固定资产时下列哪项会下降
  • 公司之间借款怎么操作
  • 建设工程招标办
  • 王者荣耀花木兰打法教学
  • 发票开出后只收到部分款怎么处理?
  • 费用分摊的分录
  • 现金折扣税务处理shi
  • 单位专项资金使用管理规
  • yii框架运行原理
  • 以前年度损益调整结转到哪里
  • springmvc常见问题
  • 水利建设税根据什么申报
  • python缺失值的解决方法
  • Python函数怎么返回
  • sql server数据库正在恢复
  • sqlsever日志在哪儿
  • mysql有输入输出语句
  • 教大家8天学通MongoDB——第一天 基础入门篇
  • 织梦开发教程
  • 清算的基本流程
  • 小微企业所得税优惠政策最新2023
  • 借调是原单位发工资吗
  • 金蝶做账流程视频
  • 完税证明可以去税务局补打吗
  • 存货跌价准备的账务处理
  • 物流费用怎么算一般多少
  • microsoft SQL server 2008有什么用
  • 捐赠货物的增值税可以税前扣除吗
  • 超市小规模税负怎么算
  • 家电销售的税率
  • 企业所得税征收方式有哪些?
  • 开劳务发票需要的资料有哪些?
  • 出口退税账务处理难吗
  • 发票不按实际数量单价开 但金额一致
  • 出口退税的会计处理
  • 员工福利费是不是免税项目
  • 股东打到公帐上怎么做账
  • 未取得增值税发票措施有哪些
  • 递延收益确认的递延所得税资产有期限吗
  • 登记生产成本和制造费用的明细账
  • 企业成立前期的重点工作
  • Windows任务计划高级应用
  • svchost进程可以结束吗
  • windows10计划任务文件在哪
  • windows7磁盘管理
  • macos的磁盘
  • win7屏幕刷新率怎么调高
  • [置顶]bilinovel
  • Interlnk、Intersvr、Qbasic命令的使用方法
  • 贴吧热门评论
  • 如何使用朋友的山姆卡
  • nodejs读取文件和写文件的方法
  • JavaScript中的NaN代表什么
  • javascript 二维数组搜索
  • 2021年京东养鸡如何合作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设