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>
相关推荐
吴永琦(桂林电子科技大学)3 分钟前
Generate html
前端·html
scimence37 分钟前
html 列动态布局
前端·css·html·列动态布局
秋淮安40 分钟前
Web前端开发--HTML
前端
黑客老李1 小时前
一次使用十六进制溢出绕过 WAF实现XSS的经历
java·运维·服务器·前端·sql·学习·xss
幸运小圣1 小时前
LeetCode热题100- 轮转数组【JavaScript讲解】
javascript·算法·leetcode
Elcker1 小时前
Tauri教程-实战篇-第六节 托盘、请求完善
javascript·rust
野槐3 小时前
react实例与总结(一)
javascript·react native·react.js
小涵3 小时前
Python和JavaScript在字符串比较上的差异
开发语言·javascript·python
Goodbaibaibai3 小时前
vue基础(五)
前端·javascript·vue.js
DanceDonkey7 小时前
bootstrap.yml与spring.config.import导入nacos配置
前端·bootstrap·html