elementui表格高亮行背景色修改

最新推荐文章于 2024-05-28 19:39:02 发布
最新推荐文章于 2024-05-28 19:39:02 发布
阅读量1.1w 收藏 7
点赞数 5
分类专栏： vue 文章标签： vue element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42863267/article/details/87251340
版权

关于使用elementUI框架下，table表格高亮行背景色太浅，要求加深，效果如下：
在这里插入图片描述
这是elementUI自带的背景色，修改后效果如下：
在这里插入图片描述
修改代码如下：

.current-row > td {
   background: rgba(0, 158, 250, 0.219) !important;
}

只是在css中添加一条代码。
全部代码截图如下
在这里插入图片描述

weixin_42863267
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue+elementUI实现表格关键字筛选高亮
12-29
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下 代码： <!-- 筛选 --> 筛选： 请输入关键字> <!--
易语言高级表格鼠标移动时改变行背景色
07-23
本主题聚焦于易语言中的一个特定功能——“高级表格鼠标移动时改变行背景色”。易语言是一款以中文为编程语言的软件开发工具，它简化了编程的语法，使得非计算机专业的用户也能进行程序设计。 高级表格是易语言提供...
element表格组件el-table行设置背景颜色
qq_40673807的博客
04-15 2640
*
element饿了么ui表格选中后高亮颜色修改
songshuguowang的专栏
10-25 1万+
element表格单选选中状态下背景色太浅，为了让选中的数据更突出一些，只能自定义颜色去覆盖默认的颜色，我的表格是斑马纹的，可能非斑马的还不适用 .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td { backgro...
vue3使用Element Plus的el-table，高亮当前点击的单元格
最新发布
章小鱼的博客
05-28 835
vue3使用Element Plus的el-table，高亮当前点击的单元格
vue+elementUI中表格高亮或字体颜色改变
飞翔༒之翼
05-09 3301
重点的代码： :row-style="setRowStyle"这个属性就是在table标签绑定的 :row-style="setRowStyle" setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } }, 具体代码： hmtl <el-table width="100%" :data="gridData" border fi
Element-ui 关于Table表格某一列(指定列)背景色高亮显示，简单易懂。
qq_51930729的博客
05-11 7971
简单 易懂 好用! 直接上代码
elementUI中的el-table 实现自动滚动到指定行，同时修改高亮颜色功能——技能提升
yehaocheng520的博客
11-05 1万+
昨天在做后台管理系统时，遇到一个需求，就是有一个el-table的表格，当扫描指定条码时，可以根据条码的值比对表格的数据，如果能够找到对应的数据，就将页面滚动到此行的位置，实现自动定位功能。 如下效果： 1.加扫描框——input组件 <el-input v-model="scanData" ref="scanDataRef" style="width:200px;margin-left:10px" placeholder="请扫描条码数据" size="mini" @keyup.enter.na
element el-table 表格点击行高亮（背景色和字体颜色设置）
josiecici的博客
07-22 4811
// 表格点击高亮 /deep/ .el-table__body tr.current-row > td { background-color: #6eadff !important; color: #fff; }
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
01-19
js代码： css代码： 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
详解element-ui表格中勾选checkbox，高亮当前行
12-29
我们在做后台管理系统的时候经常需要操作表格，这里我们要实现的一个功能就是，勾选复选框，高亮显示当前行，也就是当前行样式改变。这是一个非常常见的使用场景，官网给我们提供了一个带Checkbox的table表格，但是...
element的table点击选中之后设置当前行高亮
sunlizhen的专栏
12-01 1118
实现点击当前行样式背景高亮 在element-ui.scss的样式里面添加 .el-table__body tr.current-row>td{ background-color: #fdf3ea; color: #f19944; } 在这里注意 :row-class-name="tableRowClassName" 是在渲染表格的时候就调用了，不能通过点击事件改变行的颜色 实现hover前行样式背景高亮 在element-ui.scss的样式里面添加 .el-table--enable...
vue+elementui el-table 设置默认渲染时，某一行或者多行高亮
weixin_43643250的博客
07-21 2903
我们在项目中可能会遇到为了让用户更直观的看到table列表中的某些信息，需要高亮显示 此图为最终样式图，需要什么颜色改什么颜色就行 于是我们就可以在el-table中加入 :row-class-name=“tableRowClassName” <el-table :row-class-name="tableRowClassName" :data="value.palletInfos"
elementui如何在表格中高亮显示某一行数据或者某列属性
xiaotiaoza的博客
11-03 3933
elementui使表格样式发生改变
表格通用样式el-table的表头颜色样式，表内边框行高样式，点击行高亮变颜色
weixin_45646663的博客
08-19 1731
:height='400' style="width: 100%" :header-cell-style="{'text-align':'center',background:'rgb(15, 73, 237,.1)',color:'#333333','font-size': '14px','font-family': 'PingFang SC','font-weight': '700','border-color': '#CFDBFB'}" :cell-style="{'text-align':'cen
VUE + element-ui改变table表格中点选行的颜色（highlight-current-row）
a870017443的博客
07-09 3772
官网文档中颜色偏淡，标识性不强，我们可以在App.vue中更改一下CSS属性如下，一定在App.vue！！！！！！！！！！！！！！！！！！！！！！！！ .el-table__bodytr.current-row>td{ color:#fff; background-color:#409eff; } ...
vue对highlight-current-row方式整行选中后修改默认背景颜色
凌大大的博客
06-13 2万+
  从Element网站上找到对于table表格的整行选中的效果如下：   但是默认的这个整行选中背景颜色有点浅，如果相对其修改背景颜色，可以修改默认样式，如下： .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td { ...
使用element-ui中的table修改鼠标经过或悬停行时颜色修改
走走停停
02-25 1万+
第一种： .el-table--enable-row-hover .el-table__body tr:hover>td{ background-color: #c6cfdf !important; } 第二种： .el-table__body tr:hover>td{ background-color: #c6cfdf!important; } .el-table__body tr.current-row>td{ background-color: #c6
【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线
热门推荐
Sabrina_cc的博客
04-25 2万+
【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线
elementui中点击表格一行数据添加高亮背景色效果
05-27
要在ElementUI中实现点击表格一行数据添加高亮背景色效果，你可以使用ElementUI提供的表格事件和样式来实现。具体实现方法如下： 1. 在el-table组件上绑定row-click事件，并在方法中获取点击行的索引值。 ```html <el-table @row-click="handleClick"> ``` ```javascript methods: { handleClick(row, column, event) { // 获取点击行的索引值 const rowIndex = this.$refs.table.$el.querySelector('tbody tr[class*=\'el-table__row--current\']').getAttribute('data-row-index') } } ``` 2. 在表格的行样式中，定义一个添加高亮背景色的class，如：`highlight`。 ```css .highlight { background-color: #f5f5f5; } ``` 3. 在方法中根据索引值，为点击的行添加`highlight`类名，同时移除其他行的`highlight`类名。 ```javascript methods: { handleClick(row, column, event) { // 获取点击行的索引值 const rowIndex = this.$refs.table.$el.querySelector('tbody tr[class*=\'el-table__row--current\']').getAttribute('data-row-index') // 为点击的行添加highlight类名 this.$refs.table.$el.querySelectorAll('tbody tr').forEach((row, index) => { if (index == rowIndex) { row.classList.add('highlight') } else { row.classList.remove('highlight') } }) } } ``` 这样，当你点击表格中的某一行时，该行就会添加高亮背景色，同时其他行的背景色会被移除。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值