element中dialog出现滚动条记录位置问题

最新推荐文章于 2024-07-09 09:36:44 发布
最新推荐文章于 2024-07-09 09:36:44 发布
阅读量3.5k 收藏 4
点赞数 3
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q122214/article/details/104360157
版权

        今天使用element中的Dialog组件时发现一个问题：当Dialog内容过多时会出现滚动条，而当你滚动到一定位置后关闭Dialog，然后再次打开时滚动条仍然保持在上一次关闭前的位置而没有回到顶部。网上找了两种方法都不太管用，最后在同事的帮助下解决了。

        使用element-ui，dialog中的destroy-on-close属性，关闭时销毁 Dialog 中的元素。这样在每次打开dialog时，滚动条都是在最顶部的。

        

        

下雨天吃巧克力
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
ElScrollBar 组件是 Element-ui 中用于自定义滚动条样式的组件。下面详细介绍 ElScrollBar 组件的使用方法和原理。 1. 自定义滚动条的使用场景和优势 在开发Web应用时，尤其是在后台管理界面，常会遇到页面内容...
el-dialog中内容自定义滚动条
风水道人
10-20 1787
el-dialog中内容自定义滚动条
elementui-plus el-dialog弹出时body有滚动条，修改了body样式
u014220146的博客
08-30 3455
使用组件el-dialog弹窗，写在二级组件中。
解决el-dialog弹框出现页面抖动问题
最新发布
m0_69538493的博客
07-09 412
main.js(后只需要添加ElementUI.Dialog.props.lockScroll.default = false;添加 Dialog.props.lockScroll.default = false。
elementUI Dialog内容区域显示滚动条
爱米酱的博客
10-25 4569
【代码】elementUI Dialog内容区域显示滚动条。
Element UI Dialog 对话框改成固定高度，超出部分滚动条滚动
热门推荐
weixin_44702139的博客
05-19 1万+
问题描述 elememt ui 中的el-dialog对话框如果内容过多高度会被无限拉长。要将其设置成固定高度，此处我设置的是页面总高度的80%，内容过多时在对话框内出现滚动条，具体代码如下： 但是这样设置会造成高度不能根据内容自适应，始终是80% // 内容 <template> <el-dialog :title="title" :visible.sync="dialogVisible" class="showAll_dialog"
Element-ui中元素滚动时el-option超出元素区域的问题
12-01
popperEl是在mouseup事件里去做隐藏逻辑的, 而按下鼠标, 移动滚动条的时候, 并没有触发mouseup事件. popperEl并没有监听滚动事件(没法监听, 也没必要监听) 解决方案  方案一 我最初想到的解决方案是通过css解决，...
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
弹出框随滚动条滚动
07-31
标题中的“弹出框随滚动条滚动”是一个前端开发中的常见需求，主要涉及到网页交互设计。当用户在页面上滚动时，某些特定的弹出框（如提示信息、菜单或对话框）需要保持在用户的视野内，这通常通过JavaScript或者CSS...
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
对于Cascader滚动超出问题，原因可能是Cascader的内部分页滚动条没有正确计算或限制高度。以下是一些可能的解决方案： 1. 设置`overflow-y`：检查Cascader组件的父级元素是否有`overflow-y: auto`或`scroll`，这...
el-dialog 里面的 table内容加滚动条
HZM_CSDN的博客
11-04 1512
【代码】el-dialog 里面的 table内容加滚动条。
element ui el-dialog 居中，并且内容多的时候内部可以滚动
一方湖泊
01-19 1050
<el-dialog title="图标设置" :visible.sync="iconModal" custom-class="pub_dialog"> </el-dialog> css 放到公共css文件里（放到App.vue的css中），不能放到页面的style里 // dialog自定义 .pub_dialog { position: absolute; top: 50%; left: 50%; margin: 0 !important;
element弹框组件——滚动条“回家”指南
Shids_的博客
04-29 2464
element弹框组件——滚动条“回家”指南
解决再次打开el-dialog里面el-form的滚动条不置顶
qq_43513818的博客
03-18 1205
因为再次打开带有滚动条的dialog，滚动条会回到上次打开的位置，而不是置顶。 Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true，我也不清楚具体啥原因，有时间再具体分析 ...
element-ui对话框组件Dialog在回调事件opened获取组件滚动条scrollTop的问题
atjw25188的博客
10-23 1511
今天使用element中的Dialog组件时发现一个问题：当Dialog内容过多时会出现滚动条，而当你滚动到一定位置后关闭Dialog，然后再次打开时滚动条仍然保持在上一次关闭前的位置而没有回到顶部。 　　通常遇到这样的问题解决方法就是在某个钩子事件中将组件的scrollTop值重新设为0，在element2.4.8的文档中，Dialog组件提供的事件一共有四个：open...
element 实现上下滚动 点击滚动
qq_41438838的博客
06-09 1390
element 实现上下滚动 点击滚动
Vue3+ElementPlus modal弹窗拖拽关闭弹窗后位置不重置问题
朝花夕拾的博客
07-04 352
添加这个属性关闭时销毁dom元素即可。
vue element在dialog添加滚动条
05-27
要在 Vue Element 的 Dialog 中添加滚动条，你可以使用 `el-dialog` 组件的 `body-style` 属性，并设置 `overflow-y: auto` 样式，示例代码如下： ```html <template> <el-dialog title="Dialog Title" :visible="dialogVisible" :close-on-click-modal="false" :body-style="{overflowY: 'auto'}"> <p>Dialog Content</p> <p>Dialog Content</p> <p>Dialog Content</p> <p>Dialog Content</p> <p>Dialog Content</p> <p>Dialog Content</p> <p>Dialog Content</p> <p>Dialog Content</p> <p>Dialog Content</p> <p>Dialog Content</p> <p>Dialog Content</p> </el-dialog> </template> ``` 在上面的代码中，`body-style="{overflowY: 'auto'}"` 表示设置 `el-dialog` 组件的内容区域为自动垂直滚动条，当内容高度超过对话框高度时，会自动出现滚动条，让用户可以滚动查看所有内容。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值