登录
首页 >  文章 >  前端

Element UI el-table 固定列 hover 触发不同步怎么办?

时间:2024-12-08 21:57:54 339浏览 收藏

“纵有疾风来,人生不言弃”,这句话送给正在学习文章的朋友们,也希望在阅读本文《Element UI el-table 固定列 hover 触发不同步怎么办?》后,能够真的帮助到大家。我也会在后续的文章中,陆续更新文章相关的技术文章,有好的建议欢迎大家在评论留言,非常感谢!

Element UI el-table 固定列 hover 触发不同步怎么办?

element 中 el-table 固定列 hover 触发不同步的解决办法

在使用 element ui 的 el-table 组件时,存在固定列和普通列 hover 触发不一致的问题。这会导致鼠标快速移动时,固定列和普通列的背景色切换不同步。

示例:

<p>https://codepen.io/cynthia0329/pen/pobdwed</p>

如上例所示,鼠标快速 hover 时会出现以下现象:

- 如果鼠标放在普通列,感觉固定列的 hover 慢了一阵子。
- 如果鼠标放在固定列,则普通列的 hover 慢了。

解决办法:
要解决这个问题,需要对 hover 样式进行自定义。具体步骤如下:

.el-table__row.hover-row > td {
  background: red !important;
}

该样式将强制所有 hover 行中的所有单元格(包括固定列和普通列)同时获得背景色。这样,固定列和普通列的 hover 触发将保持同步。

到这里,我们也就讲完了《Element UI el-table 固定列 hover 触发不同步怎么办?》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于的知识点!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>