element plus dialog滚动条置顶问题

已于 2024-01-31 16:04:21 修改
阅读量611 收藏
点赞数 4
分类专栏： web前端 文章标签： 前端 javascript html
于 2024-01-31 13:54:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17627195/article/details/135951965
版权

直接上解决方案了

<el-dialog v-model="DialogVisible" :destroy-on-close="true">
   <el-table :data="" :show-header="false" max-height="350">
    </el-table>
</el-dialog>

注意：主要是:destroy-on-close="true" 参数。

【Vue笔记】基于vue3 + element-plus + el-dialog封装一个自定义的dialog弹出窗口组件
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
11-19 726
v-model模式下，默认的属性名称是【modelValue】，可以省略不写，这种方式下，只需要在使用组件的时候，直接写【v-model】就可以实现数据的双向绑定。如果你想自定义属性名称，那么你就必须使用【v-model:属性名称】的格式来进行数据的双向绑定，这种模式下，必须指定属性名称，要和子组件中的props属性名称相同，另外emits发送事件的时候，也要使用【emits("update:属性名称")】这种格式，这样才可以完成数据的双向绑定。
vue elementUI 对话框Dialog 打开后滚条回到顶部
progrmmmm的博客
11-29 3187
正常情况下网页虽然不会显示滚动条了,但是不会回到顶部. 1.点击弹出对话框的标签是a标签,而且加了href,去掉href就可以了.
Vue | Element UI Plus 完美解决el-dialog双滚动条、页面抖动问题
m0_59074557的博客
03-12 2782
(添加 :lock-scroll="false" 属性)（无效的话把冒号去掉试试）解决双滚动条问题：（无效的话去掉deep）
element 解决dialog滚动条置顶问题
weixin_45289656的博客
12-28 2262
弹窗出现滚动条的时候滚动到最底下， 下次在点开的时候还在最底下，可以通过以下方式解决 <el-dialog title="formTitle" :lock-scroll="false" //主要是这个属性 :append-to-body="true" //跟这个属性 ></el-dialog> ...
vue-element 对话框关闭以后打开，让滚轮回到最顶端
Zhong_zong_ming的博客
11-28 1148
【代码】vue-element 对话框关闭以后打开，让滚轮回到最顶端。
El-dialog打开之后滚动到顶部
Brioal Is Hardworking
10-14 2679
El-dialog打开之后滚动到顶部
解决使用el-dialog,切换tab页标签时滚动条还原到了最顶端
Lella的博客
05-30 541
el-dialog里面内容比较多，每次用户滚动中间查看某个数据，切了其他tab页再回来的时候滚动条又回到了最顶端，给操作带来不便，故对代码进行了更改每次切完tab标签，el-dialog滚动条位置保持不变，因为项目中使用比较多，故写了公共方法。
element Dialog添加滚动条
qq_41742961的博客
11-03 2370
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="900px" v-if="deviceDialog"> <div :style="{height: scrollHeight}" style="overflow-y: auto;overflow-x:hidden" > <el-form :model="form" ref="form" :inline="true" l
Vue3+Element Plus中dialog层级显示出错
weixin_44079946的博客
04-04 2074
dialog层级错乱
element-plus select 滚动加载更多
qq_38329111的博客
02-08 2199
vue3 element-plus select 滚动加载更多
element-plus 表格翻页后，滚动条回到顶部
WY_LJN的博客
01-21 1211
element-plus 表格 el-table 翻页后，滚动条回到顶部。 tableRef.value.layout.table.refs.tableWrapper.childNodes[0].childNodes[2].scrollTop = 0 感觉不如document.getElementByClassName方便 document.getElementsByClassName('el-table__body-wrapper')[0].scrollTop = 0 这两种方式都很不优雅，应该也有其
vue el-dialog 点击之后滚动条回到顶部
xuxingyuan_的博客
12-19 5035
vue el-dialog 点击之后滚动条回到顶部 记录你当前滚动条的位置 <el-dialog :title="baseTitle" :visible.sync="visible" :before-close="cancelHandle" :close-on-click-modal="false" width="760px" :lock-scroll="false" :append-to-...
elementui-plus el-dialog弹出时body有滚动条，修改了body样式
u014220146的博客
08-30 3889
使用组件el-dialog弹窗，写在二级组件中。
vue3+elementPlus：el-dialog弹窗内容在其内部滚动，自己位置不随内容改变
意初的博客
03-02 1958
vue3+elementPlus：el-dialog弹窗内容在其内部滚动，自己位置不随内容改变
el-dialog设置滚动条不生效记录【草稿版，待优化】
老衲的少女心i~
06-26 1606
技术栈记录el-dialog的弹窗中，通过js控制滚动条不生效。我这次的需求是这样的，点击某个按钮传入参数查询进入一个上下文的弹窗，需要我手动控制滚动条，滚动到当前点击的item的地方，也就是当前item显示在弹窗的中间部分，并且高亮。弹窗里面是表格，我这边是通过js控制这个滚动元素的滚动条实现的。但是遇到一个问题是，每当我想要scrollTop设置成最大高度scrollHeight的时候，总是不成功。提示：以下是本篇文章正文内容，下面案例可供参考。
【Element-plus】el-table新增数据后自动滚到表格的底部或顶部
最新发布
weixin_40057665的博客
06-19 847
【代码】【Element-plus】如何让滚动条永远在最底部。
element-ui table 点击分页table滚到顶部
weixin_45561965的博客
04-19 1148
使用table表格的时候，切换分页之后不会回到顶部，还是停留在之前滚动的位置。//切换分页的方法加上下面这句，table就能自动滚到顶部。设置table的 ref=‘multipleTable’在开发项目过程中遇到这样一个问题。看到这如果帮到你了留个小心心吧。
解决再次打开el-dialog里面el-form的滚动条不置顶
qq_43513818的博客
03-18 1331
因为再次打开带有滚动条的dialog，滚动条会回到上次打开的位置，而不是置顶。 Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true，我也不清楚具体啥原因，有时间再具体分析 ...
el-dialog中内容自定义滚动条
风水道人
10-20 1858
el-dialog中内容自定义滚动条
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` 组件的内容区域为自动垂直滚动条，当内容高度超过对话框高度时，会自动出现滚动条，让用户可以滚动查看所有内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值