el-table去掉hover 固定在右侧操作栏透明了
时间: 2024-12-11 07:39:50 浏览: 79
在Vue的Element UI库中,`el-table`组件默认有一个鼠标悬停的效果(hover),如果需要移除这个效果,并将其右侧的操作栏设置为透明,你可以通过CSS样式来定制。
首先,你需要禁用`el-table`的行内悬浮效果。这可以通过在CSS中添加以下样式来完成:
```css
.el-table tr:hover {
background-color: transparent; /* 或者自定义颜色,这里设置为透明 */
}
```
然后,针对右侧的操作栏(通常包含`el-row-action`或`el-table-column`的fixed属性),你可以设置其背景色为透明,以及一些其他样式使其透明显示。假设操作栏位于表的最后一列,你可以这样做:
```css
.el-table__row-actions,
.el-table__right-side .el-table__column:last-child {
background-color: rgba(0, 0, 0, 0); /* 设置为半透明或者完全透明,rgba值最后一个0表示透明度 */
opacity: 0; /* 如果你想让元素完全不可见,可以设置为0 */
pointer-events: none; /* 阻止点击穿透,如果你不想让用户点击到下面的内容 */
transition: all 0.3s ease; /* 添加平滑过渡效果 */
}
/* 当鼠标悬停在操作栏上时恢复可见性(如有需要) */
.el-table__row-actions:hover,
.el-table__right-side .el-table__column:last-child:hover {
opacity: 1;
pointer-events: auto;
}
```
请根据你的实际布局调整选择器,确保选择正确的列或者操作栏元素。记得将上述样式应用到你的Vue组件对应的style标签或者外部CSS文件中。
阅读全文
相关推荐


















