el-date-picker前置怎么设置。

1.最近遇到一个问题，就是需要在el-date-picker前置：开始时间，结束时间。el-input可以前置后置等，问题是element-ui没有为el-date-picker提供这样的功能。

名称	说明
prefix	输入框头部内容，只对非 type="textarea" 有效
suffix	输入框尾部内容，只对非 type="textarea" 有效
prepend	输入框前置内容，只对非 type="textarea" 有效
append	输入框后置内容，只对非 type="textarea" 有效

经过查找终于找到了别人的解决方法，现在发出来供大家参考。

代码：

<div class="timepick-width-prepend">
  <el-button type="default" class="prepend-text">预估量产时间</el-button>
  <el-date-picker v-model="formData.planProductTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
</div>

首先我们在外层 DIV 上使用 flex 布局让他们横向排列，垂直居中。让后给 button 添加上背景色。移除button 的 hover 效果。

至此大体上已经很接近我们想要的效果了，最后在细节上优化下，将他们重合处的圆角处理下，button 组件的右侧上下圆角值重置为0，datepicker 的左侧上下圆角值重置为0。

.timepick-width-prepend {
  display: flex;
  align-items: center;
  .prepend-text {
    background: #F5F7FA;
    color: #909399;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    cursor: default;

    :focus, :hover {
      border-color: #DCDFE6!important;
    }
  }
  .prepend-text:focus, .prepend-text:hover {
    border-color: #DCDFE6!important;
  }
  .el-input__inner {
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
  }
}
复制代码

最后补充一下，我并没有实现 el-date-picker的去除圆角，还有一个问题就是这个看起来像正常的前置了，但是和原本的前置还是有区别的。比如前置部分都是四个文字的情况下占的大小也不一样。element-ui提供的前可能提供了样式，等我找到了样式再解决这个问题吧。