el-dialog fixed height

The default height of el-dialog is free to stretch. When the content exceeds the screen, a scroll bar will appear, and the buttons and titles will scroll along with it. The user experience is not good.

As shown below

Now to achieve a fixed window height and content scrolling method, directly put a layer of div on the content and add a custom style el-dialog-div as follows

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

<style lang="scss">
.el-dialog-div {
    
    
  height: 60vh;
  overflow-x: hidden;
}
</style>

The effect is as follows