模态窗口组件关闭时销毁表单

1、要求表单组件内容区域必须嵌套 <template v-if="visible"></template>

<el-dialog :visible.sync="visible" width="700px" top="2vh" v-draggable @close="handleClose">
  <template v-if="visible">
    <span slot="title">
      <i class="fa fa-pencil-square-o b"> 路由管理</i>
    </span>
    <el-form ref="form" :model="form" :rules="formRules" label-width="155px" size="small">
      <el-form-item label="模块代码：" prop=s"moduleCode">
        <el-input v-model.trim="form.moduleCode" placeholder="输入模块代码"></el-input>
      </el-form-item>
      <el-form-item label="路由代码：" prop="routerCode">
        <el-input v-model.trim="form.routerCode" placeholder="输入路由代码"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button type="primary" size="small" @click="handleSave">保存</el-button>
    </div>
  </template>
</el-dialog>

2、关闭弹窗时需要调用表单清空方法对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

/**
 * 处理取消
 */
handleCancel() {
  this.visible = false;
},
/**
 * 处理弹出框关闭
 * 1、重置表单数据
 */
handleClose() {
  this.$refs.form.resetFields();
  this.form.id = '';
},

3、可参考Element-Ui官网文档：Element-Ui官网文档