覆盖element-plus el-table 排序图标

表格排序图标交互

最新推荐文章于 2025-08-29 04:45:04 发布

原创最新推荐文章于 2025-08-29 04:45:04 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #elementui

本文介绍了一种实现表格头部排序图标显示与交互的方法。通过CSS控制图标显示与隐藏，并使用hover效果增强用户体验。当鼠标悬停在表头字段上时，会显示排序图标，并改变背景颜色。

功能需求

默认不显示排序图标
鼠标滑入表头字段时，显示图标，文字与图标均添加背景色，图标默认显示升序
点击升序排序，图标高亮，鼠标移出时仍保留
点击高亮升序图标，变为降序图标并高亮，鼠标移出时仍保留
点击高亮降序图标，变为默认升序图标，鼠标移出隐藏
效果如下

实现方法

为 th.el-table__cell 添加hover 样式，实现背景色高亮
通过 visible 属性控制显示哪个图标
通过table 升序降序状态，高亮图标
代码如下

/* 表格标题排序图标，鼠标移入显示，有排序显示，鼠标移出隐藏 start */

.el-table th.el-table__cell>.cell > span:first-child {
  padding: 0 10px;
  margin: 0 -10px;
}
.el-table th.el-table__cell>.cell:hover > span:first-child {
  background-color: #f7f2ee;
  transition: all .5s;
}
.el-table th.el-table__cell>.cell > span.caret-wrapper {
  visibility: hidden;
  height: 23px;
  flex-direction: row;
  transition: all .5s;
}
.el-table th.el-table__cell>.cell > span.caret-wrapper .sort-caret {
  width: auto;
  height: auto;
}
.el-table th.el-table__cell>.cell > span.caret-wrapper .sort-caret.descending,
.el-table th.el-table__cell>.cell > span.caret-wrapper .sort-caret.ascending  {
  position: absolute;
  border: none;
  font-family:'icomoon' !important ;
  font-style: normal;
  top: 0;
  bottom: 0;
}
/* 降序图标 */
.el-table th.el-table__cell>.cell > span.caret-wrapper .sort-caret.descending::before {
  content:"\e939";
  visibility: hidden;
}
/* 升序图标 */
.el-table th.el-table__cell>.cell > span.caret-wrapper .sort-caret.ascending::before {
  content:"\e93a";
} 
/* 升序时升序高亮 */
.el-table th.el-table__cell.ascending>.cell > span.caret-wrapper .sort-caret.ascending::before {
  color: var(--el-color-primary);
  visibility: visible;
} 
/* 升序时降序隐藏 */
.el-table th.el-table__cell.ascending>.cell > span.caret-wrapper .sort-caret.descending::before {
  visibility: hidden;
} 
/* 降序时降序高亮 */
.el-table th.el-table__cell.descending>.cell > span.caret-wrapper .sort-caret.descending::before {
  color: var(--el-color-primary);
  visibility: visible;
} 
/* 降序时升序隐藏 */
.el-table th.el-table__cell.descending>.cell > span.caret-wrapper .sort-caret.ascending::before {
  visibility: hidden;
} 
/* 有排序时保持背景色 */
.el-table th.el-table__cell.ascending>.cell span,
.el-table th.el-table__cell.descending>.cell span {
  background-color: #f7f2ee;
  visibility: visible;
}

.el-table th.el-table__cell>.cell:hover > span:first-child + span{
  visibility: visible;
  background-color: #f7f2ee;
  transition: all .5s;
}
/* 表格标题排序图标 end */