我经常遇到如下需求

但众所周知，element的clearable当位置冲突时，后缀图标， 他会这样:

这是由于：

所以我们只需要将它们的父内容更改为相反的顺序，所以

::v-deep {
    .el-input__suffix {
        // 处理前缀图标未垂直居中的问题
        height: auto;
        font-size: 20px;
    &-inner {
       flex-direction: row-reverse;
       -webkit-flex-direction: row-reverse;
       display: flex;
     }
   }    
}

垂直线拆分代码:

::v-deep {
       .el-icon-search {
          position: relative;
          &:hover {
            color: rgb(109, 109, 240);
          }
          &::after {
            content: ;
            width: 1px;
            height: 50%;
            left: -1.5px;
            position: absolute;
            top: 25%;
            background-color: rgb(233, 233, 233);
          }
        }
      }

其中包括： 如果未写入伪元素content未显示

解决问题后的实施效果如下: