如何去除element-ui中table的hover效果
更新时间:2023年10月18日 09:38:59 作者:前端cv大师
这篇文章主要介绍了如何去除element-ui中table的hover效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
去除element-ui中table的hover效果
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: rgba(0, 0, 0, 0) !important;
}
写一个rgb 色值 替换即可
为table的某一行添加样式 表明一种状态
<el-table
:data="dataList"
style="width: 100%; margin-top: 30px"
border
stripe
fit
empty-text
@row-click="tableRowClick"
:row-class-name="tableRowClassName"
@cell-mouse-enter="cursor"
:style="cursorPointer"
v-loading="listLoading"
></el-table>
tableRowClassName方法
// 为table的某一行添加样式 表明一种状态
tableRowClassName({ row, rowIndex }) {
// 表示注销
if (row.statusFlag === 2) {
return "warning-row";
}
return "";
},
“warning-row”即为要添加的样式类名
element-ui中使用table表格相关问题
1.hover某一行时修改背景颜色
可引入固定代码
.el-table--enable-row-hover {
.el-table__body tr:hover > td {
background: #E6FFF7;//这里写你想切换的颜色
}
}`
2. 固定表头
当你的表格某一行需要hover或者active增加一定的样式或效果时,你会发现样式效果加上后,表头就算是固定宽度,但是还是会出现不断闪烁,这时候可在 总css文件里面 加上这段固定代码去控制
//固定表头
.el-table th.gutter{
display: table-cell!important;
}
.el-table colgroup.gutter{
display: table-cell!important;
}
3. 对于有多选框的表格
需要勾选某行,就修改其背景颜色
如图:

//html中
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"//获取点击的那一行的数据
:row-style="rowClass"//设置单行样式
>
//声明两个数组用来存储取出来的数据
data() {
return {
selectRow: [],
selectData: [],
}
}
//mothods中
//click每一行函数---获取数据
handleSelectionChange(data) {
this.selectData = data;
},
// 修改样式
rowClass({ row, rowIndex }) {
if (this.selectRow.includes(rowIndex)) {
return { "background-color": "#E6FFF7" };
}
},
//watch中监听点击行数据变化
watch: {
selectData(data) {
this.selectRow = [];
if (data.length > 0) {
data.forEach((item, index) => {
this.selectRow.push(this.tableData.indexOf(item));
});
}
},
},
4. hover某一行
动态修改某一行的文本信息

//html中
<el-table
:data="tableData"
style="width: 100%"
@cell-mouse-enter="handleMouseEnter"//鼠标移入事件
@cell-mouse-leave="handleMouseLeave"//鼠标移出事件
>
<el-table-column label="账号状态" width="300" :key="itemkey">//这里绑定key值是为了避免改一行的值引发了修改所有行的值
<template slot-scope="scope">
<div v-if="enable==scope.row.id">//用唯一的id修改显示和隐藏
<span class="edit">编辑</span>
<span class="disable">禁用</span>
<span class="delete">删除</span>
</div>
<div v-else>启用</div>
</template>
</el-table-column>
//mothods中hover单元格函数
handleMouseEnter: function (row, event) {
this.itemkey = Math.random();//这里的key值给随机数
this.showFunction = row.id;//这里绑定唯一的id
},
handleMouseLeave: function (row, event) {
this.itemkey = Math.random();
this.showFunction = 0;
},
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue中使用element ui的弹窗与echarts之间的问题详解
这篇文章主要介绍了vue中使用element ui的弹窗与echarts之间的问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue demi支持sfc方式的vue2vue3通用库开发详解
这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08
Vue3处理错误边界(error boundaries)的示例代码
在开发 Vue 3 应用时,处理错误边界(Error Boundaries)是一个重要的考量,在 Vue 3 中实现错误边界的方式与 React 等其他框架有所不同,下面,我们将深入探讨 Vue 3 中如何实现错误边界,并提供一些示例代码帮助理解什么是错误边界,需要的朋友可以参考下2024-10-10


最新评论