废话少说，先上图

image.png

el-date-picker的icon默认是居左显示，坑就坑在，elment竟然没有提供放居右显示的api。
但是，ui的设计又需要居右显示。没办法，只好css+js各显神通的去实现这个功能。闲言少叙，我直接上代码

css方式：

// dom层：
<el-form-item label="时间：">
      <el-date-picker type="date"
                      suffix-icon="el-icon-date"
                      placeholder="选择日期"
                      v-model="time"
                      class="datepicker"
                      style="width: 100%;">
      </el-date-picker>
</el-form-item>

// css层：
.el-date-editor {
    .el-input__prefix {
       position: absolute;
        left: 282px; // left根据实际情况定值
        top: 0;
     }
     input {
       padding-left: 15px;
     }
}

image.png

image.png

js方式：

// dom层
<el-form-item label="实际到账时间：">
   <div class="date-box" style="width: 100%;"
@mouseover="onMouseOver()" @mouseleave="onMouseleave()">
       <el-date-picker type="date"
           prefix-icon="''"
           placeholder="选择日期"
           v-model="comfirmForm.name"
           class="datepicker"
            style="width: 100%;">
        </el-date-picker>
        <i class="el-icon-date" ref="iconDate"></i>
    </div>
</el-form-item>

// js 层
onMouseOver() {
  this.$refs.iconDate.style.display = 'none';
},
onMouseleave() {
  this.$refs.iconDate.style.display = 'block';
},

// css层：
.datepicker {
    /deep/.el-input__inner {
      padding-left: 15px;
    }
  }
  .date-box {
    position: relative;
    width: 100%;
    width: fit-content;
    .el-icon-date {
      position: absolute;
      top: 50%;
      right: 10px;
      z-index: 9;
      color: #c0c4cc;
      font-size: 14px;
      transform: translateY(-50%);
    }
    /deep/ .el-range__close-icon {
      position: absolute;
      right: 34px;
      top: 54%;
      transform: translateY(-50%);
    }
 }

默认显示dateicon，当鼠标经过时，dateicon消失，会显示el-date-picker自带的clearicon

image.png

image.png