1、设置宽度时一定要加单位
width= “800px” 否则单独写width="800"会不起作用
<el-dialog
:visible.sync="visible"
width= '800px'
@closed ="handle_close"
:close-on-click-modal="false"
>
</el-dialog>
2、里面的数据添加滚动条
<el-dialog
:visible.sync="visible"
>
<div class="content-box">
<div class="content1">
<span>这是一段信息</span>
</div>
<div class="content2">
<span>这是一段信息</span>
</div>
</div>
</el-dialog>
.content-box{
height: 150px;
overflow-y: scroll;
.content1{
height: 200px;
width: 200px;
background: pink;
}
.content2{
background: rgb(187, 187, 117);
height: 200px;
width: 200px;
}
}
.content::-webkit-scrollbar {
/* 隐藏默认的滚动条 */
-webkit-appearance: none;
}
.content::-webkit-scrollbar:vertical {
/* 设置垂直滚动条宽度 */
width: 4px;
}
3、重新打开弹窗滚动条比没有到顶部,而是留在上次停留的地方
解决方法:
头部添加 :destroy-on-close = “true”(关闭时销毁 Dialog 中的元素)
:destroy-on-close = "true"
4、重新打开弹窗并没有更新里面的数据
这是由于重新打开弹窗并不会更新dom
解决方法一:外面嵌套一个div,使用v-if来控制
<div v-if="visible" >
<el-dialog
:visible.sync="visible"
>
<div class="content-box">
<div class="content1">
<span>这是一段信息</span>
</div>
<div class="content2">
<span>这是一段信息</span>
</div>
</div>
</el-dialog>
</el-dialog>
解决方法二:使用nextTick来更新dom
handle_open(){
this.$nextTick(()=>{
this.visible= true
}
}
5、控制点击空白处是否能关闭
:close-on-click-modal="false"