如何去掉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、鼠标点击事件时让他们的颜色与背景色一样就可以.
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/lsy1162526799/article/details/10647407
相关文章
- 这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
- 这篇文章主要介绍了el-table树形表格表单验证(列表生成序号),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
- 这篇文章主要介绍了C# 遍历datatable字段名和value的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-19
- 将List类型转换成DataTable的通用方法,大家参考使用吧...2020-06-25
- 由于业务需要,要求实现树形菜单,且菜单数据由后台返回,下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13
- 这篇文章主要介绍了C#获取变更过的DataTable记录的实现方法,对初学者很有学习借鉴价值,需要的朋友可以参考下...2020-06-25
vue element table中自定义一些input的验证操作
这篇文章主要介绍了vue element table中自定义一些input的验证操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18Mysql中 show table status 获取表信息的方法
这篇文章主要介绍了Mysql中 show table status 获取表信息的方法的相关资料,需要的朋友可以参考下...2016-03-12- 这篇文章主要介绍了C#从DataTable获取数据的方法,涉及C#操作DataTable的相关技巧,需要的朋友可以参考下...2020-06-25
- DataTable用于在.net项目中,用于缓存数据,DataTable表示内存中数据的一个表,在.net项目中运用C#将DataTable转化为CSV文件,接下来通过本文给大家提供一个通用的方法,感兴趣的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C# DataTable常见用法,帮助大家更好的理解和学习c#,感兴趣的朋友可以了解下...2020-11-03
vue 中使用 vxe-table 制作可编辑表格的使用过程
这篇文章主要介绍了vue 中使用 vxe-table 制作可编辑表格的使用过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-13- 这篇文章主要介绍了Bootstrap Table使用整理(四)之工具栏的相关资料,需要的朋友可以参考下...2017-06-15
- 如果你的实体类与数据库表是完全一致的。上代码:...2020-06-25
- 这篇文章主要介绍了基于elementUI竖向表格、和并列的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-26
- 有时候我们从数据库获取的数据量太大,而我们不需要一次性显示那么多的时候,我们就要对数据进行分页处理了,让每页显示不同的数据。...2020-06-25