element-plus 解决el-dialog背后的页面滚动问题,及其内容有下拉框出现错位问题

这个问题通常是因为 el‑dialog 默认会锁定 body 的滚动(通过给 body 添加隐藏滚动条的样式),从而导致页面在打开对话框时跳转到顶部。解决方法是在使用 el‑dialog 时禁用锁定滚动功能。

复制代码
<el-dialog
  v-model="dialogVisible"
  :lock-scroll="false"
  title="示例对话框"
  width="50%">
  <!-- 对话框内容 -->
</el-dialog>

加上:lock-scroll="false"即可

但是当里面的内容有下拉选择的组件的情况,里面的组件点击出来后会错位,只要在组件上挨个加上 :teleported="false"即可

复制代码
<el-select v-model="recordForm.relation" :teleported="false">
              <el-option
                v-for="item in case_relation"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
相关推荐
H_z_q240110 分钟前
Web前端制作一个评论发布案例
前端·javascript·css
摘星编程26 分钟前
React Native + OpenHarmony:useId唯一标识生成
javascript·react native·react.js
2603_9494621036 分钟前
Flutter for OpenHarmony社团管理App实战:消息中心实现
android·javascript·flutter
秋秋小事36 分钟前
可选链与非空操作符
前端
iRuriCatt1 小时前
智慧景区管理系统 | 计算机毕设项目
java·前端·spring boot·vue·毕设
qq_12498707531 小时前
基于springboot的会议室预订系统设计与实现(源码+论文+部署+安装)
java·vue.js·spring boot·后端·信息可视化·毕业设计·计算机毕业设计
程序员清洒1 小时前
Flutter for OpenHarmony:Icon 与 IconButton — 图标系统集成
前端·学习·flutter·华为
萧曵 丶1 小时前
JavaScript 函数各种写法和场景
开发语言·javascript·ecmascript
Yolanda942 小时前
【项目经验】钉钉免密登录实现
前端·javascript·钉钉
2601_949613022 小时前
flutter_for_openharmony家庭药箱管理app实战+药品详情实现
java·前端·flutter