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;
}
相关推荐
月下点灯15 分钟前
使用Set集合新特性,快速实现一个商品SKU(单品)规格选择器
前端·javascript·vue.js
大侠Luffy16 分钟前
做了这些SEO动作,独立开发的网站开始被搜索引擎逐量收录
前端·seo
四棱子22 分钟前
炫酷!18.5kb实现流体动画,这个开源项目让个人主页瞬间高大上!
前端·开源
Sparkxuan23 分钟前
封装WebSocket
前端·websocket
工呈士23 分钟前
Redux 实践与中间件应用
前端·react.js·面试
Nano24 分钟前
深入解析 JavaScript 数据类型:从基础到高级应用
前端
无羡仙24 分钟前
浮动与BFC容器
前端
xphjj24 分钟前
树形数据模糊搜索
前端·javascript·算法
刺客_Andy25 分钟前
React 第三十四节 Router 开发中 useLocation Hook 的用法以及案例详解
前端·react.js
我的div丢了肿么办25 分钟前
HarmonyOS鸿蒙tabBar的详细讲解
前端·javascript·harmonyos