The pit stepped on by using el-dialog

1. Be sure to add the unit when setting the width

width="800px" otherwise writing width="800" alone will not work

 <el-dialog
       :visible.sync="visible"
       width= '800px'
       @closed ="handle_close"
       :close-on-click-modal="false"
>
 </el-dialog>

2. Add a scroll bar to the data inside

 <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. Re-open the scroll bar of the pop-up window instead of reaching the top, but stay where it stayed last time.
Solution:
add: destroy-on-close = "true" to the header (destroy the elements in the Dialog when closing)

 :destroy-on-close = "true"

4. Re-opening the pop-up window does not update the data inside.
This is because reopening the pop-up window will not update the dom.
Solution 1: Nest a div outside, use v-if to control

<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>

Solution 2: Use nextTick to update dom

handle_open(){
    
    
	this.$nextTick(()=>{
    
    
		this.visible= true
	}
}

5. Control whether clicking on the blank space can close

:close-on-click-modal="false"