iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何去掉ElementUITable的hover变色问题
  • 557
分享到

如何去掉ElementUITable的hover变色问题

2024-04-02 19:04:59 557人浏览 薄情痞子
摘要

目录去掉ElementUI Table的hover变色用函数方法ElementUI使用table时,取消鼠标点击、hover对某一行背景颜色变化实例去掉ElementUI Table

去掉ElementUI Table的hover变色

在自定义Element的时候,有一些自带特效我们不想要,去掉又不知道怎么去掉。

比如Table的hover变色。

其实方法并不是去掉,而是让他看起来不变。

开始↓定义单元格背景色:

<el-table
     :cell-style="{background:'#f5f5f5'}"
     >

定义单元格hover颜色:

 .el-table tbody tr:hover>td {
            background-color:#f5f5f5 !important
        }

其实就是让hover颜色跟背景色一样啊

用函数方法

:cell-style="setCellStyle"

函数方法为

setCellStyle({ row, column, rowIndex, columnIndex }) {
        if (column.label === '当前列表头的名字') {
          return "background:#e8e8e8;"//可以设置颜色或者边框
        }
        if (columnIndex === 4) {
          return "background:#e8e8e8;"
        } else {
          return "background:#e8e8e8;"
        }
      }

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

在使用ElementUI中的table时,往往会有这样的需求:针对某种状态对table表格中的某一行数据进行高亮显示,但同时又要取消鼠标点击事件和hover对高亮显示的行不受影响。

具体的高亮显示,官网中有文档介绍:可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。

在这里插入图片描述

实例

<el-table v-loading="loading.table" :data="data.list.items" fit :cell-style="cellStyle" element-loading-text="玩命加载中"
			element-loading-spinner="el-icon-loading" header-cell-class-name="table-header-cell" style="width:100%"
			@selection-change="handleSelectionChange" border :row-class-name="tableRowClassName">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column label="项目编号" align="center" prop="id" min-width="100">
			</el-table-column>
			<el-table-column label="项目名称" align="center" prop="xmmc" min-width="150">
			</el-table-column>
			<el-table-column label="计划开工日期" align="center" prop="jhkgrq" min-width="150">
				<template slot-scope="scope">
					{{ scope.row.jhkgrq | dateFORMart('yyyy-MM-dd') }}
				</template>
			</el-table-column>
			<el-table-column label="计划竣工日期" align="center" prop="jhjgrq" min-width="150">
				<template slot-scope="scope">
					{{ scope.row.jhjgrq | dateFormart('yyyy-MM-dd') }}
				</template>
			</el-table-column>
			<el-table-column label="项目地址" align="center" prop="xmwz" min-width="150" :show-overflow-tooltip='true'>
			</el-table-column>
			<el-table-column label="项目所属区域" align="center" prop="qymc" min-width="150">
			</el-table-column>
			<el-table-column label="是否竣工" align="center" prop="sfjg" min-width="120" :formatter="stateFormat">
			</el-table-column>
			<el-table-column label="操作" align="center" prop="state" min-width="240">
				<template slot-scope="scope">
					<el-button icon="el-icon-search" size="mini" type="success" @click="lookHandler(scope.$index, scope.row)">查看
					</el-button>
					<i v-if="scope.row.sfjg==1">
						<el-button icon="el-icon-edit" size="mini" type="success" :disabled="true"
							@click="editHandler(scope.$index, scope.row)">
							编辑
						</el-button>
					</i>
					<i v-else>
						<el-button icon="el-icon-edit" size="mini" type="success" @click="editHandler(scope.$index, scope.row)">
							编辑
						</el-button>
					</i>
				</template>
			</el-table-column>
		</el-table>

颜色标记处理:

tableRowClassName({ row, rowIndex }) {
	if (row.sfjg == 1) {
		return "success-row";
	} else if (row.sfjg == 0) {
		return "warning-row";
	} else {
		return "";
	}
},

在全局样式中定义高亮颜色显示


.table-header-cell {
	background-color:#8bd2c2!important;
	color: #fff;
	font-weight: 400;
}
.el-table .success-row {
    background: #ffb707!important;
}
.el-table .warning-row {
	background: #def6f6;
}

这样就完成了某一行的高亮显示,取消鼠标事件和hover对高亮显示的行影响,我的列表(只作为数据展示)是取消了highlight-current-row 是否要高亮当前行 这个属性,就正常了。

因为:row-class-name="tableRowClassName"在渲染表格的时候就调用了,不能用来响应点击事件改变行的颜色。

或者可以给表格增加:highlight-current-row属性,高亮显示当前行,然后通过修改CSS样式来改变颜色:

定义响应事件

.el-table__body tr.current-row>td {
        background: #ffb707!important;
    }

定义hover事件

.el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: #ffb707!important
}

改变不了就融入他们,在hover、鼠标点击事件时让他们的颜色与背景色一样就可以.

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 如何去掉ElementUITable的hover变色问题

本文链接: https://www.lsjlt.com/news/167443.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何去掉ElementUITable的hover变色问题
    目录去掉ElementUI Table的hover变色用函数方法ElementUI使用table时,取消鼠标点击、hover对某一行背景颜色变化实例去掉ElementUI Table...
    99+
    2024-04-02
  • css如何去掉颜色
    小编给大家分享一下css如何去掉颜色,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css去掉颜色的方法:首先打开相应的前端代码文件;然后通过添加“backgrou...
    99+
    2023-06-14
  • word中的背景色如何去掉
    在Word中去除文本的背景色,可以按照以下步骤操作:1. 选中你想要去除背景色的文本。2. 在顶部菜单栏中选择“字体颜色”图标,通常...
    99+
    2023-10-07
    word
  • css如何去掉a标签的颜色
    这篇文章主要介绍css如何去掉a标签的颜色,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css去掉a标签的颜色的方法:首先打开相应的代码文件;然后找到a标签内容;最后通过“-webkit-user-select: n...
    99+
    2023-06-14
  • word红色波浪线如何去掉
    本篇内容介绍了“word红色波浪线如何去掉”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!word红色波浪线去掉的方法:首先打开word,然后...
    99+
    2023-07-01
  • R语言包ggplot如何实现分面去掉小标题的灰色底色
    这篇文章给大家分享的是有关R语言包ggplot如何实现分面去掉小标题的灰色底色的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。当我们在使用 ggplot 时,使用分面通常会长下面这样(这里用 ggplot 的官方案...
    99+
    2023-06-25
  • 如何解决hover在IE6下的问题
    这篇文章给大家分享的是有关如何解决hover在IE6下的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。hover在IE6下的问题在处理CSS的机制上,IE总是有很多让人吐血的...
    99+
    2024-04-02
  • 如何解决xp桌面图标去掉蓝底的问题
    如何解决xp桌面图标去掉蓝底的问题,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。可以尝试以下几种方法(如果你在桌面进行了粘贴前三项无效,请你选用第四项修复): ...
    99+
    2023-06-14
  • 如何解决多行排列图片时hover上去加边框挤图片的问题
    本篇内容主要讲解“如何解决多行排列图片时hover上去加边框挤图片的问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何解决多行排列图片时hover上去加边框...
    99+
    2024-04-02
  • 如何解决IE6下伪类hover失效的问题
    如何解决IE6下伪类hover失效的问题,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。第一篇:在处理CSS的机制上,拿对伪类:hover的...
    99+
    2024-04-02
  • R语言包ggplot实现分面去掉小标题的灰色底色小技巧
    当我们在使用 ggplot 时,使用分面通常会长下面这样(这里用 ggplot 的官方案例): p <- ggplot(mpg, aes(displ, hwy)) + ge...
    99+
    2024-04-02
  • php中变量如何去掉最后一个字符
    这篇文章主要介绍了php中变量如何去掉最后一个字符的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇php中变量如何去掉最后一个字符文章都会有所收获,下面我们一起来看看吧。去掉方法:1、用“substr(...
    99+
    2023-06-30
  • 如何解决css中hover做遮盖罩闪动的问题
    这篇文章主要介绍如何解决css中hover做遮盖罩闪动的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体代码如下所示:<div id="div2&qu...
    99+
    2024-04-02
  • html如何去掉button的边框
    这篇文章主要讲解了“html如何去掉button的边框”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html如何去掉button的边框”吧! ...
    99+
    2024-04-02
  • jquery如何去掉div的背景
    这篇“jquery如何去掉div的背景”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jqu...
    99+
    2024-04-02
  • php如何去掉左边的0
    这篇文章主要介绍“php如何去掉左边的0”,在日常操作中,相信很多人在php如何去掉左边的0问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php如何去掉左边的0”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-06-22
  • Android开发中如何去掉app标题栏的实现
    方法 一、若创建Activity时继承的是 Activity: 第一种:常用的一种方法: requestWindowFeature(Window.FEATURE_NO_...
    99+
    2024-04-02
  • css中li的点如何去掉
    这篇文章给大家分享的是有关css中li的点如何去掉的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css去掉li的点的方法:1、通过“<li style="list-style-type:none;...
    99+
    2023-06-14
  • Vue 如何关掉响应式问题
    目录Vue如何关掉响应式例子v-onceVue响应式的处理过程Vue如何关掉响应式 大家都知道Vue有双向数据绑定 ,但是很少人知道怎样把它这个功能关掉 比如想要让某个值的改变不改变...
    99+
    2024-04-02
  • jquery如何去掉td里的内容
    本篇内容主要讲解“jquery如何去掉td里的内容”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery如何去掉td里的内容”吧! ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作