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;
}
相关推荐
拾光拾趣录6 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲14 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃23 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军24 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子27 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游27 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
markyankee10128 分钟前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
中微子28 分钟前
智能前端实践之 shot-word demo
前端
归于尽29 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810129 分钟前
vite 插件
前端