如何去掉ElementUI Table的hover变色问题

 更新时间:2022年09月13日 16:09:40   作者:EruruI  
这篇文章主要介绍了如何去掉ElementUI Table的hover变色问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

去掉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、鼠标点击事件时让他们的颜色与背景色一样就可以.

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例

    vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例

    这篇文章主要介绍了vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • 如何使用vue-pdf-embed实现PDF在线预览

    如何使用vue-pdf-embed实现PDF在线预览

    vue-pdf-embed是一个基于Vue.js的插件,专门用于在Vue应用中嵌入和展示PDF文件,本文将使用vue-pdf-embed实现PDF在线预览功能,有需要的小伙伴可以参考一下
    2025-03-03
  • Vue 购物车案例练习

    Vue 购物车案例练习

    这篇文章主要给大家分享关于Vue 购物车案例的小练习,文章个悲剧购物车为标题需求利用HTML代码实现整个过程,需要的朋友可以参考一下文章的具体内容
    2021-10-10
  • Vue3获取DOM节点的3种方式实例

    Vue3获取DOM节点的3种方式实例

    Vue本来无需操作DOM来更新界面,而且Vue也不推荐我们直接操作DOM,但是我们非要拿到DOM操作DOM怎么办,下面这篇文章主要给大家介绍了关于Vue3获取DOM节点的3种方式,需要的朋友可以参考下
    2023-02-02
  • M1 pro芯片启动Vue项目的方法步骤

    M1 pro芯片启动Vue项目的方法步骤

    本文主要介绍了M1 pro芯片启动Vue项目的方法步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 开启Vue项目缺少node_models包的问题及解决

    开启Vue项目缺少node_models包的问题及解决

    这篇文章主要介绍了开启Vue项目缺少node_models包的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue项目之前端CryptoJS加密、解密代码示例

    vue项目之前端CryptoJS加密、解密代码示例

    在Vue项目中集成CryptoJS进行数据加密,首先需要通过npm安装CryptoJS安装包,然后在项目文件中引入CryptoJS,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • Vue Router 返回后记住滚动条位置的实现方法

    Vue Router 返回后记住滚动条位置的实现方法

    使用 Vue router 创建 SPA(Single Page App),往往有这种需求:首页是列表页,点击列表项进入详情页,在详情页点击返回首页后,希望看到的是,首页不刷新,并且滚动条停留在之前的位置,这篇文章主要介绍了Vue Router 返回后记住滚动条位置的实现方法,需要的朋友可以参考下
    2023-09-09
  • Vue全局注册中的kebab-case和PascalCase用法

    Vue全局注册中的kebab-case和PascalCase用法

    这篇文章主要介绍了Vue全局注册中的kebab-case和PascalCase用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue中provide、inject详解以及使用教程

    Vue中provide、inject详解以及使用教程

    provide和inject主要为高阶插件/组件库提供用例,并不推荐直接用于应用程序代码中,下面这篇文章主要给大家介绍了关于Vue中provide、inject详解以及使用的相关资料,需要的朋友可以参考下
    2022-11-11

最新评论