elementUI对话框Dialog使用技巧

在我工作过程中使用Dialog对话框的需求挺多的，也积累了一下使用技巧，本篇文章用作记录使用技巧，基础操作可看elementUI官方文档：element UI官网

一、对话框禁止ESC键、点击空白区域关闭

:close-on-click-modal="false"  //禁用点击空白区域
:close-on-press-escape="false" //禁用ESC键

二、对话框body设置滚动条

给对话框设置overflow: auto;属性即可。

overflow: auto;

三、对话框表单数据初始化（清空数据）

1.resetFields()

给对话框设置close事件，绑定resetFields()数据初始化方法。

<el-dialog
  :title="visible.title"
  :visible.sync="visible.add"
  width="40%"
  @close="cancel">
  
  <el-form>
  ref="Form"
  :model="Editor"
  :rules="rules">
  </el-form>
  
</el-dialog>

cancel () {
  this.visible.add = false;
  this.$nextTick(() => {
    this.$refs.Form.resetFields();
  })
},

resetFields()方法也可以将表单验证的效果清除。

2.this.$options.data()

this.$options.data()方法重置组件Data()里的数据。

<el-dialog
  :title="visible.title"
  :visible.sync="visible.add"
  width="40%"
  @close="cancel">
  
  <el-form>
  ref="Form"
  :model="Editor"
  :rules="rules">
  </el-form>
  
</el-dialog>

cancel () {
  this.visible.add = false;
  this.Editor = this.$options.data().Editor;
},