element-ui 中日期选择器的icon放右边

啥话不说先上代码

1.结构

<template>
  <div class="date_box">
    <el-date-picker
      v-model="form.startingTime"
      type="date"
      :clearable="false"
      align="center"
      :clear-icon="null"
      placeholder="请选择开始日期"
    ></el-date-picker>
    <img src="@/assets/img/system/Calendar.png" alt="" >
  </div>
</template>

2.css

// 穿刺写法
::v-deep .el-range__icon {
  display: none;
}
.date_box {
  width:300px !important;
  position: relative;
  //width: fit-content;
  img {
    position: absolute;
    top: 50%;
    right: 17px;
    z-index: 9;
    color: #c0c4cc;
    font-size: 14px;
    transform: translateY(-50%);
  }
  ::v-deep .el-range__close-icon {
    position: absolute;
    right: 34px;
    top: 54%;
    transform: translateY(-50%);
  }
}
::v-deep .el-input__prefix {
  display: none;
}

说白了逻辑就是把图片定位过去，这个我相信很多人都能想到，也能做到，我是出现了一个小坑，就是我把图片定位过去以后，左边的icon去不掉，导致左面右面各一个icon，所以我通过::v-deep改了一下，把左面的隐藏了就好了。