el-dialog的body中设置滚动条

最新推荐文章于 2025-04-02 14:47:16 发布

梁白开33

最新推荐文章于 2025-04-02 14:47:16 发布

阅读量4.4k

点赞数 2

分类专栏： elementUI 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/S2181834/article/details/127958537

版权

elementUI 专栏收录该内容

5 篇文章

订阅专栏

el-dialog中设置滚动条

目前在工作中遇到dialog的body中设置滚动条问题，在看过多个博客后找到了解决办法，记录一下。

弹出框

<el-dialog class="item-dialog">
	<el-form>
		<el-form-item>
		    名称：
			<el-input>
			</el-input>
		</el-form-item>
	</el-form>
</el-dialog>

样式编写

<style>
.item-dialog{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
}
.el-dialog{
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;
        
    }
.el-dialog__body{
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
</style>