### 解决方案 在 Element Plus 中，`el-date-picker` 组件默认会占用一定的宽度，而当 `type="daterange"` 时，默认宽度可能无法满足设计需求。可以通过以下方法为其设置自定义宽度。 #### 方法一：通过 CSS 调整宽度 可以直接为目标组件添加类名，并通过外部样式控制其宽度： ```html <template> <el-form :model="form"> <el-form-item label="日期范围"> <el-date-picker v-model="form.dateRange" type="daterange" class="custom-width-datepicker" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期" /> </el-form-item> </el-form> </template> <style scoped> .custom-width-datepicker { width: 100%; /* 设置为父容器的100% */ } /* 如果需要更具体的宽度 */ .custom-width-datepicker .el-range-editor.el-input__inner { width: 300px; /* 自定义输入框宽度 */ } </style> ``` 上述代码中，`.custom-width-datepicker` 是我们为 `el-date-picker` 添加的一个额外类名，用于覆盖默认样式并调整宽度[^1]。 --- #### 方法二：使用内联样式 如果不想新增类名，也可以直接使用内联样式来实现宽度调整： ```html <el-date-picker v-model="form.dateRange" type="daterange" style="width: 100%;" <!-- 或者指定具体像素值 --> unlink-panels start-placeholder="开始日期" end-placeholder="结束日期" /> ``` 这种方式适合简单的场景，但如果项目中有统一的样式管理机制，则不推荐此方式[^2]。 --- #### 方法三：动态绑定宽度 对于更加灵活的需求，可以利用 Vue 的动态绑定功能，在数据模型中存储宽度值，并将其传递给组件： ```vue <template> <el-form :model="form"> <el-form-item label="日期范围"> <el-date-picker v-model="form.dateRange" type="daterange" :style="{ width: datePickerWidth }" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期" /> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { dateRange: [], }, datePickerWidth: '100%', // 可以根据业务逻辑动态修改该值 }; }, }; </script> ``` 这种方法允许开发者基于不同的条件动态调整组件宽度[^3]。 --- #### 注意事项 1. **响应式布局**：如果页面需要支持多种屏幕尺寸，建议结合媒体查询或框架自带的栅格系统（如 Element Plus 提供的 `el-col`），确保组件在不同设备上都能正常显示。 2. **内部结构影响**：`el-date-picker` 的实际渲染内容由多个子元素组成，因此仅调整外层宽度有时不足以完全解决问题。必要时需进一步定制 `.el-range-editor` 和其他相关类的选择器[^4]。 --- ### 总结 为了正确地为 `el-date-picker (type=daterange)` 应用自定义宽度样式，可以选择通过 CSS 类名、内联样式或者动态绑定的方式完成配置。每种方法各有优劣，应根据实际开发需求选择最合适的解决方案。 ---