vue element 怎样去除页面的隔行变色

最新推荐文章于 2024-08-08 14:47:33 发布

原创最新推荐文章于 2024-08-08 14:47:33 发布 · 832 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #css #前端

本文探讨了如何使用CSS覆盖Element UI el-table的默认背景色，当鼠标悬停在表格行上时实现自定义样式。通过`:cell-style`属性结合hover伪类，展示了灵活控制表格样式的实践方法。

<el-table>
 :cell-style="{ background: '#2b4085'}"
</el-table>


//css
>>> .el-table tbody tr:hover>td {
            background-color: #2b4085 !important
        }
//我的方法是将原来的背景色覆盖

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaodanda

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue el-table 动态修改row每行颜色

周家大小姐

07-06

5349

<div class="shop-modal-content"> <el-table :row-class-name="tableRowClassName" class="marketing-table-style-1" :data="gridData" :header-cell-style="{background:'#2D2F3F',color:'#FFFFFF'}"> <el-table-column align="cente...

webpack基础篇搭配（Vue + Element）

无知者无畏

04-24

572

webpack前端项目构建工具 1. 当前 Web开发面临的困境文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级Javascript 特性兼容程度较低 etc… 2.webpack概述 webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。 webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问...

参与评论您还未登录，请先登录后发表或查看评论

Element-UI的使用——表格el-table组件去除边框、滚动条设置、隔行变色、去除鼠标悬停变色效果(基于less)

smouns_的博客

10-09

4480

去除鼠标悬停变色效果。

清除修改Vue自带的CSS样式

Coin_Collecter的博客

03-17

2291

清除修改删除Vue自带的CSS样式。在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色，后来发现是Vue自带了默认的CSS样式导致的。

ElementUI使用table时，取消鼠标点击、hover对某一行背景颜色变化

两眼一睁神志不清

12-29

6550

在使用ElementUI中的table时，往往会有这样的需求：针对某种状态对table表格中的某一行数据进行高亮显示，但同时又要取消鼠标点击事件和hover对高亮显示的行不受影响。具体的高亮显示，官网中有文档介绍：可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。实例： <el-table v-loading="loading.table" :data="data.list.items" fit :cell-s

去掉element-ui的el-table的所有边框以及背景颜色

weixin_62186125的博客

12-12

1372

* 去掉table所有边框 */

el-table自定义CSS样式实现隔行变色与表头定制

为了成功应用隔行变色，需使用深度选择器（如 Vue 中的 `/deep/`、`::v-deep` 或 `>>>`）穿透 scoped CSS 的作用域限制，例如编写类似 `.el-table ::v-deep tbody tr:nth-child(even) { background-color: #f8f8f8;...

黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统-用户列表制作

weixin_48884617的博客

03-27

6631

黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统--用户列表制作

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-权限管理制作

weixin_48884617的博客

04-10

4005

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-权限管理制作

Vue---day09增删改查（面包屑导航）

最新发布

ZHUSHANGLIN的博客

08-08

424

【代码】Vue---day09增删改查（面包屑导航）

表格渲染(悬浮变色,隔行换色,点击变色)

09-08

/** * * @author 翟正强广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */

jquery中tablesorter隔行颜色变化以及对应表格拖拽技术

03-01

jquery的表格排序和表格行排序以及表格行拖动功能以及拖动以后仍然保持隔行颜色变化博文链接：https://dandansdu.iteye.com/blog/239412

ant design vue：表格隔行换色

1111111111

01-09

1159

<template> <div> <a-table :columns="columns" :data-source="data" bordered :customRow="customRow"> </a-table> </div> </template> methods: { //设置表格隔行变色 customRow(record, index) { return { style: { .

Element UI表格隔行变色

qq_44158162的博客

12-01

8928

表格隔行变色有两种方式第一种，我们给表格设置“stripe”属性 <el-table :data="tableWarningData" style="width: 100%" :header-cell-style="{ color: '#1572e9' }" stripe :cell-style="changeCellStyle"> 然后在style里面写下如下代码 .el..

[element-ui] 修改table表格隔行变色背景颜色透明改hover颜色

qq_14993591的博客

03-24

3498

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{ background: #212936; /*隔行变色*/ } element-ui中修改table表格隔行变色的样式

el-table 树形表格隔行变色后，树展开合并后隔行变色样式错乱

葡萄要吃山竹的博客

11-02

1981

el-table树形表格隔行变色，展开合并后样式出问题解决方法

table表格隔行变色

changten的博客

11-15

1029

动态添加table表格 var name= $("#name").val(); var sex=$("#sex").val(); var sr=$("#sr").val(); var province=$("#province").find("option:selected").text(); var city=$("#city").find("option:selected").tex

el-table去掉滚动条和斑马纹颜色修改

weixin_44042792的博客

01-12

1811

/deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 0px; // 横向滚动条 height 0px; } /deep/ .el-table__body-wrapper { background: #02133a; } /deep/ .gutter { background: #02133a !important; } /deep/ .el-table__body-wrapper::-webkit-scrollbar-

Element ui表格隔行变色