vue实现对highlight-current-row方式整行选中后修改默认背景颜色
更新时间:2023年11月16日 10:09:41 作者:茁壮成长的凌大大
这篇文章主要介绍了vue实现对highlight-current-row方式整行选中后修改默认背景颜色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue对highlight-current-row方式整行选中后修改默认背景颜色
从Element
网站上找到对于table表格
的整行选中的效果
如下:
但是默认的这个整行选中背景颜色有点浅,如果相对其修改背景颜色,可以修改默认样式
如下:
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td { color: #fff; background-color: #a2a4a7!important; }
修改了当前页的这个样式后,会看到下边的效果:
highlight-current-row和@row-click一起使用问题
elementui官方文档
使用后效果如下:
chrome开发者模式Elements中观察作用样式
Vue单文件在scss中修改样式如下即可
::v-deep .el-table__body tr.current-row > td { background: #f0f9eb !important; }
修改后效果如下:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue+elementUI实现当渲染文本超出一定字数时显示省略号
这篇文章主要介绍了vue+elementUI实现当渲染文本超出一定字数时显示省略号,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
这篇文章主要介绍了Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08Vue3中element-plus全局使用Icon图标的过程详解
我们在用vue开发网站的时候,往往图标是起着很重要的作,这篇文章主要给大家介绍了关于Vue3中element-plus全局使用Icon图标的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
最新评论