vue3+elementPlus：el-dialog弹窗内容在其内部滚动，自己位置不随内容改变

最新推荐文章于 2025-06-25 09:02:41 发布

原创

最新推荐文章于 2025-06-25 09:02:41 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html #前端 #vue.js

文章介绍了如何在Vue3项目中使用ElementPlus库来定制el-dialog弹窗的样式，包括设置最大高度、内边距和滚动条。同时，文章详细讲解了如何实现el-table中的单元格点击事件（cell-click），并添加.stop修饰符阻止事件冒泡，以实现表格操作按钮的复制功能。

//html
 
<div class="el-dialog-div">
 // 窗口内容
 <el-dialog
   :title="dialogTitle"
   :visible.sync="dialogOpen"
   :width="dialogWidth"
   append-to-body
   :close-on-click-modal="false"
 >
 ......
 </el-dialog>
</div>

//css
//弹窗窗口
.el-dialog-div {
  //弹出层里内容 样式
  ::v-deep(.el-dialog__body) {
    max-height: 70vh !important;
    overflow-y: auto;
    padding: 0 20px 0 20px;
   }
  }

上一篇文章，

vue3+elementPlus：表格复制功能_意初的博客-优快云博客在el-table里创建cell-click事件,再在表格操作按钮加上.stop阻止冒泡行为。https://blog.youkuaiyun.com/weixin_43928112/article/details/129056601?spm=1001.2014.3001.5501