场景描述

vue3+element plus UI

页面中点击不同的item，弹出不同的内容，由于内容过长，会有滚动条出条，再次点击其它item时，滚动条的位置是上次dialog的位置，查阅文档主要有两种解决方案

第一种

destroy-on-close :关闭时即销毁

简单写个demo

<el-dialog v-model="visible" destroy-on-close>
    <p v-for="i in 100">{{ i }}</p>
</el-dialog>

第二种

:lock-scroll="false" :是否在 Dialog 出现时将 body 滚动锁定

:append-to-body="true":Dialog 自身是否插入至 body 元素上

<el-dialog v-model="visible" :lock-scroll="false" :append-to-body="true">
    <p v-for="i in 100">{{ i }}</p>
</el-dialog>

以上

看似没有任何问题，但就是不起作用，找了很多，大家都说是以上两种解决方案，但都是element2.0的，不知道为什么element plus不起作用，查看了github上issues也只是说要么销毁，要么append到body里，lock-scroll,最后我的解决方案，是在dialog外层添加了一个div,起效果了，具体原因还没有深究，等有空了再扒一扒源码。

<div v-if="visible">
  <el-dialog v-model="visible" :lock-scroll="false" :append-to-body="true">
    <p v-for="i in 100">{{ i }}</p>
  </el-dialog>
</div>