el-date-picker 至显示不全

el-date-picker 至显示不全的原因是由于外层父元素的宽度不够。当 el-date-picker 组件被嵌套在一个宽度不足的父元素中时，就会导致至字显示不全的问题。为了解决这个问题，只需要更改父元素的宽度即可。你可以通过修改样式来设置父元素的宽度。下面是两种解决方法：

方法一（使用 element-ui 的 el-form 组件）：

<el-form-item label="时间" class="elselect">
  <el-date-picker v-model="searchModel.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>

<style>
.elselect /deep/ .el-range-separator {
  width: 24px;
}
</style>

方法二（使用普通的 div）：

<template>
  <div class="contract-manage">
    <el-date-picker v-model="statisticsTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
  </div>
</template>

<style lang="scss">
.contract-manage {
  .el-range-separator {
    width: 24px;
  }
}
</style>

在这两种方法中，我都给出了修改父元素宽度的样式代码。你可以根据你的实际情况选择其中一种方法来解决 el-date-picker 至显示不全的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [使用element-ui中的el-date-picker，中间的至字显示不全的原因及解决](https://blog.csdn.net/Aa12364567/article/details/125842949)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [【无标题】使用element-ui中的el-date-picker，中间的至字显示不全的原因及解决](https://blog.csdn.net/qq_46266925/article/details/123485007)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]