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;
}
相关推荐
2501_915373881 小时前
Vue 3零基础入门:从环境搭建到第一个组件
前端·javascript·vue.js
沙振宇4 小时前
【Web】使用Vue3开发鸿蒙的HelloWorld!
前端·华为·harmonyos
运维@小兵4 小时前
vue开发用户注册功能
前端·javascript·vue.js
蓝婷儿4 小时前
前端面试每日三题 - Day 30
前端·面试·职场和发展
oMMh5 小时前
使用C# ASP.NET创建一个可以由服务端推送信息至客户端的WEB应用(2)
前端·c#·asp.net
一口一个橘子5 小时前
[ctfshow web入门] web69
前端·web安全·网络安全
读心悦6 小时前
CSS:盒子阴影与渐变完全解析:从基础语法到创意应用
前端·css
m0_616188496 小时前
使用vue3-seamless-scroll实现列表自动滚动播放
开发语言·javascript·ecmascript
香蕉可乐荷包蛋7 小时前
vue数据可视化开发echarts等组件、插件的使用及建议-浅看一下就行
vue.js·信息可视化·echarts
老马啸西风7 小时前
sensitive-word-admin v2.0.0 全新 ui 版本发布!vue+前后端分离
vue.js·ui·ai·nlp·github·word