el-date-picker面板宽度

### 如何设置 Element-UI `el-date-picker` 组件弹出面板的宽度 可以通过自定义 CSS 或者覆盖默认样式来实现调整 `el-date-picker` 日期选择器弹出面板的宽度。以下是具体方法： #### 方法一：通过全局样式修改 可以针对 `.el-date-picker` 的类名直接写入全局样式文件中，或者在 `<style>` 中使用 `/deep/` 深度作用符（适用于 Vue 单文件组件中的 scoped 样式）。 ```css /* 修改日期选择器弹出框的宽度 */ .el-date-picker { width: 300px !important; /* 设置为你想要的宽度 */ } ``` 如果是在单文件组件中使用，则需要加上深度作用符： ```css <style scoped> /deep/ .el-date-picker { width: 300px !important; } </style> ``` 这种方法会直接影响到整个项目中所有的 `el-date-picker` 面板宽度。 --- #### 方法二：动态绑定内联样式 也可以通过 JavaScript 动态控制日期选择器的宽度。例如，在模板中绑定一个计算后的宽高值给 `popper-class` 属性，并单独为该 class 定义样式。 HTML 结构如下： ```html <el-date-picker v-model="value1" type="date" placeholder="选择日期" popper-class="custom-datepicker-width"> </el-date-picker> ``` CSS 自定义样式： ```css .custom-datepicker-width { width: 350px !important; /* 可以自由设定宽度 */ } ``` 这种方式更加灵活，能够仅影响特定的日期选择器而不会干扰其他地方使用的组件[^2]。 --- #### 方法三：禁止手动输入并配合样式调整 当存在额外需求比如 **禁止用户手动输入** 同时还需要改变弹窗大小时，可结合上述两种方式以及禁用手动输入功能一起完成配置。例如添加 `editable=false` 和监听 focus 时间处理只读逻辑[^3]: ```javascript export default { data() { return { value1: '', }; }, methods: { timeEditable() { const els = document.querySelectorAll('.el-date-picker__editor-wrap input'); for (let i = 0; i < els.length; i++) { els[i].setAttribute('readonly', 'readonly'); // 禁止编辑 } }, }, }; ``` 同时 HTML 应这样编写： ```html <el-date-picker v-model="value1" type="date" editable="false" <!-- 禁止键盘输入 --> @focus="timeEditable" <!-- 处理焦点事件 --> placeholder="选择日期" popper-class="custom-datepicker-width"> <!-- 使用自定义class --> </el-date-picker> ``` 最后再补充对应的 CSS 文件即可达到目标效果。 --- ### 总结 以上三种方案分别适合不同场景下的开发需求，推荐优先考虑第二种即利用 `popper-class` 来局部定制化样式的做法，因为它既简单又高效还不容易引起副作用。