el-data-picker图标置右

1.正常页面

html

          <el-form-item label="操作时间 :" class="stationName">
            <div class="data" @mouseenter="dataEnter" @mouseleave="dataLeave" >
            <el-date-picker
              v-model="form.operateDate"
              value-format="yyyy-MM-dd"
              type="daterange"
              placement="bottom-start"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              prefix-icon=0
              size="small"
            />
            </div>
          </el-form-item>

mounted

 mounted() {
    // 日历图标
    let ElRangeCloseIcon = document.getElementsByClassName('el-range__close-icon')[0]
    ElRangeCloseIcon.innerHTML = '<i class="iconfont icon-calendar"/>'
  },

methods

// 时间选择器图标处理
    dataEnter(){
      if(this.form.operateDate.length){
        let ElRangeCloseIcon = document.getElementsByClassName('el-range__close-icon')[0]
        ElRangeCloseIcon.innerHTML = ''
      }
    },
    dataLeave(){
      let ElRangeCloseIcon = document.getElementsByClassName('el-range__close-icon')[0]
      ElRangeCloseIcon.innerHTML = '<i class="iconfont icon-calendar"/>'
    },

2.弹窗

以上操作对弹窗不生效，尝试网上很多方法处理的还是不够好，看了el-dialog源码发现它是基于v-if处理的，主要原因是不渲染DOM。

换种方式，用相对定位+鼠标事件来做

html

<el-form-item label="计划时间" prop="date">
        <div class="data" @mouseenter="dataEnter" @mouseleave="dataLeave" >
        <el-date-picker
          v-model="form.date"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          prefix-icon=0
        />
        <i class="showCalendar iconfont icon-calendar " v-if="showCalendar"/> //定位
        </div>
      </el-form-item>

data：定义showCalendar = true

methods

// 时间选择器图标处理
    dataEnter(){
      if(this.form.date){
        this.showCalendar = false;
        let ElRangeCloseIcon = document.getElementsByClassName('el-range__close-icon')[0]
        ElRangeCloseIcon.innerHTML = ''
      }
    },
    dataLeave(){
      this.showCalendar = true;
      let ElRangeCloseIcon = document.getElementsByClassName('el-range__close-icon')[0]
      ElRangeCloseIcon.innerHTML = '<i class="iconfont icon-calendar"/>'
    },

css

.showCalendar{
  margin-left: -27px ;
  line-height: 30px;
  position: absolute;
  color: #C0C4CC;
}