使用el-dialog踩到的坑

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"