el-date-picker 宽度溢出浏览器问题

原文链接: el-date-picker 宽度溢出浏览器问题

问题由来

HTML 复制代码
<el-date-picker 
    v-model="Time" type="datetimerange"
    range-separator="至"
    start-placeholder="年/月/日 时:分:秒"
    end-placeholder="年/月/日 时:分:秒"
    format="YYYY/MM/DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"  />

由上图可见,el-date-picker超出浏览器宽度,导致出现了滚动条。

解决办法

利用组件自身的popper-class属性,添加自定义的class

HTML 复制代码
<el-date-picker 
    v-model="Time" type="datetimerange"
    range-separator="至"
    start-placeholder="年/月/日 时:分:秒"
    end-placeholder="年/月/日 时:分:秒"
    format="YYYY/MM/DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
    popper-class="tzy-popper"  />
CSS 复制代码
.tzy-popper{
    margin-left: -55px;
}
相关推荐
中工钱袋36 分钟前
Vue 中地址栏参数与 HTTP 请求参数的同步问题
前端·vue.js·http
一只月月鸟呀38 分钟前
Vue 过滤器 filter(s) 的使用
javascript·vue.js·ecmascript
zzlyx9940 分钟前
设备管理系统功能与.NET+VUE(IVIEW)技术实现
前端·vue.js·view design
秋月华星3 小时前
【flutter】TextField输入框工具栏文本为英文解决(不用安装插件版本
前端·javascript·flutter
—Qeyser3 小时前
用Deepseek写一个 HTML 和 JavaScript 实现一个简单的飞机游戏
javascript·游戏·html
千里码aicood3 小时前
[含文档+PPT+源码等]精品基于Python实现的校园小助手小程序的设计与实现
开发语言·前端·python
青红光硫化黑4 小时前
React基础之React.memo
前端·javascript·react.js
大麦大麦4 小时前
深入剖析 Sass:从基础到进阶的 CSS 预处理器应用指南
开发语言·前端·css·面试·rust·uni-app·sass
GDAL5 小时前
better-sqlite3之exec方法
javascript·sqlite
匹马夕阳5 小时前
基于Canvas和和原生JS实现俄罗斯方块小游戏
javascript·canva可画