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;
}
相关推荐
qq_333120972 分钟前
头歌答案--爬虫实战
java·前端·爬虫
Jinuss4 分钟前
源码分析之React中的组件缓存React.memo
前端·react.js
斯班奇的好朋友阿法法10 分钟前
ollama离线导入大模型
服务器·前端·javascript
misty youth16 分钟前
pnpm build,发生了什么
前端·electron·pnpm·build
1024小神16 分钟前
kotlin安卓项目配置webview开启定位功能
前端
踩着两条虫18 分钟前
VTJ.PRO 在线应用开发平台的术语表
vue.js·低代码·ai编程
踩着两条虫18 分钟前
VTJ.PRO 在线应用开发平台的构建与发布脚本
vue.js·ai编程·前端工程化
kyriewen24 分钟前
MutationObserver:DOM界的“卧底”,暗中观察每个风吹草动
前端·javascript·面试
踩着两条虫30 分钟前
VTJ.PRO 在线应用开发平台的开发者工具与代码质量
前端·vue.js·ai编程
TON_G-T38 分钟前
100行实现Mini React
前端·javascript·react.js