el-dialog 固定高さ

el-dialog のデフォルトの高さは自由に伸縮できるため、コンテンツが画面を超えるとスクロール バーが表示され、ボタンやタイトルも一緒にスクロールするため、ユーザー エクスペリエンスは良好ではありません。

以下に示すように

ここで、固定ウィンドウの高さとコンテンツのスクロール方法を実現するには、コンテンツに div のレイヤーを直接配置し、次のようにカスタム スタイル el-dialog-div を追加します。

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

効果は以下の通りです