vue2 el-date-picker 自定义后置图标

为了在vue2 el-date-picker中自定义后置图标，可以在标签中添加suffix-icon属性，并将其设置为所需的图标类名。例如，可以将suffix-icon设置为“el-icon-date”来使用日期图标。同时，也可以通过添加prefix-icon属性来设置前置图标。如果需要自定义图标，可以在mounted()方法中使用JavaScript代码来修改图标的类名。下面是一个示例代码：

<el-form-item>
  <el-date-picker
    v-model="dateRange"
    suffix-icon="el-icon-date"
    size="small"
    style="width: 240px;margin-left:22px;"
    value-format="yyyy-MM-dd"
    type="daterange"
    prefix-icon="prefix-icon-class"
    range-separator="-"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  />
</el-form-item>

mounted() {
  // 移除默认的关闭图标
  document.getElementsByClassName('el-input__icon')[2].classList.remove('el-range__close-icon')
  // 添加自定义的图标
  document.getElementsByClassName('el-input__icon')[2].classList.add('el-icon-date')
},

.prefix-icon-class {
  display: none;
}
.el-input__icon {
  /* 移动后的icon高度100%会造成不居中 */
  height: 40px;
}