el-table点击行实现高亮效果,highlight-current-row
就可以实现这个功能,在改一下css样式。
<el-table
:data="listData"
border
v-loading="dataLoading"
:header-cell-style="{
background: '#00C0EF',
color: '#fff',
}"
:cell-style="{
padding: '2px 0',
fontSize: '12px'
}"
highlight-current-row
>
参数说明:
data:数据
border:边线
v-loading:加载效果
header-cell-style:th样式
cell-style:td样式
highlight-current-row:高亮效果
css样式
.el-table__body tr.current-row > td {
background-color: #00c0ef !important;
color: #fff;
}
以上是编程学习网小编为您介绍的“el-table鼠标点击列表自动改变颜色(当前列高亮效果)”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:el-table鼠标点击列表自动改变颜色(当前列高亮效果)
基础教程推荐
猜你喜欢
- Ajax请求响应中用window.open打开新窗口被拦截的解决方法 2023-01-20
- 兼容IE与firefox火狐的回车事件(js与jquery) 2024-01-04
- JS 中document.URL 和 windows.location.href 的区别 2024-02-10
- jquery中cookie用法实例详解(获取,存储,删除等) 2024-04-15
- 前端学习笔记style,currentStyle,getComputedStyle的用法与区别 2024-04-01
- Ajax验证用户的唯一性 2022-12-28
- js实现搜索栏效果 2024-01-23
- JSChart轻量级图形报表工具(内置函数中文参考) 2024-04-26
- Vue中如何把hash模式改为history模式 2024-03-20
- webpack高级配置与优化详解 2022-11-13