实现el-date-picker组件的日期图标放在右侧

           

           <div class="datePickerFrame" @mouseleave="addDateIcon">

                <el-date-picker

                  ref="datePickerRef"

                  v-model=""

                  class="custom-date-picker"

                  type="date"

                  placeholder="选择日期"

                >

                </el-date-picker>

            </div>

methods的方法 （记得mounted初始化方法时也要调用addDateIcon函数）

    // 日期组件的图标放在右侧

    addDateIcon() {

      let datePickerDom = this.$refs.datePickerRef[0].$el;

      let closeIcon = datePickerDom.querySelector(

        ".el-input__suffix .el-input__icon"

      );

      closeIcon.classList.add("el-icon-date");

    },

css:

  .datePickerFrame {

    position: relative;

    .custom-date-picker {

      .el-input__prefix {

        display: none;

      }

      .el-input__inner {

        padding-left: 15px;

      }

    }

  }

实现的效果图：