admin 管理员组

文章数量: 1087829


2024年3月5日发(作者：z型檩条安装)

element 去除table悬停样式

ElementUI是一个基于的组件库，提供了丰富的UI组件和样式。然而，在使用Element UI的table组件时，会发现默认会有悬停样式，即鼠标移到表格行上时会有背景色和边框。这种悬停样式可能不适合某些场景，因此需要去除。

要去除Element UI table的悬停样式，需要在CSS中重新定义表格行的样式。具体步骤如下：

1. 在CSS中添加以下代码：

.el-table__row:hover{

background-color: transparent !important;

border-color: transparent !important;

}

这段代码会将表格行的悬停样式设置为透明，即不显示背景色和边框。

2. 在table组件中添加row-class属性，并指定自定义的行样式。

例如，可以在模板中添加以下代码：

:data='tableData'

:row-class-name=''my-row''

>

...

- 1 -

这里指定了行样式的class名称为“my-row”。在CSS中定义该样式：

.my-row {

background-color: #fff !important;

border-color: #ccc !important;

}

这段代码会将表格行的背景色和边框设置为白色和灰色。

通过以上步骤，就可以去除Element UI table的悬停样式，并自定义表格行的样式了。

- 2 -


本文标签： 样式 悬停 表格 边框 背景色

版权声明：本文标题：element 去除table悬停样式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1709647247a542622.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。