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

功能需求

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

实现方法

• 为 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 */