el-dialog怎么添加内部滚动条,自己位置不随内容改变

弹框里面添加div设置一个高度就可以:


<el- dialog  width="50%" title="新增" style="overflow: hidden">
    <div style="overflow-y: auto; height: 650px">
<el-form label-width="17epx" :model-"personnelData"   style-"display: flex;flex-wrap:wrap">

                    ^^^^^
      </el-form>
</div>

<span slot="footer" class="dialog-footer">
     <el-button @click-"personnelDialogvisible = false">取 消</el-button>

</span>



div一定要加高度，否则会无效 这种方式可以实现dialog里面内容滚动 弹框保持不动

https://blog.csdn.net/cdfdfgrd/article/details/138304951?ops_request_misc=%257B%2522request%255Fid%2522%253A%25228483edd85ad855c0976d2188c3155f91%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=8483edd85ad855c0976d2188c3155f91&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-138304951-null-null.142^v102^pc_search_result_base6&utm_term=el-dialog%20%E4%B8%8D%E8%AE%A9%E5%85%B6%E6%BB%9A%E5%8A%A8&spm=1018.2226.3001.4187

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>
https://blog.csdn.net/m0_73146522/article/details/145515316?ops_request_misc=&request_id=&biz_id=102&utm_term=el-dialog%20%E4%B8%8D%E8%AE%A9%E5%85%B6%E6%BB%9A%E5%8A%A8&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-145515316.142^v102^pc_search_result_base6&spm=1018.2226.3001.4187