关闭弹层清空表单校验

src/pages/subPages/view.vue

@@ -27,16 +27,20 @@
     </el-row> -->
 
     <!-- 添加ip弹层 -->
-    <el-dialog title="添加ip白名单" :visible.sync="dialogFormVisible">
+    <el-dialog title="添加ip白名单" :visible="dialogFormVisible" @close="btnCancle">
         <el-form :model="ipFormData" :rules="rules" ref="ipFormData" label-width="80px">
             <el-form-item label="ip" prop="name">
                 <el-input v-model="ipFormData.name" autocomplete="off" style="width: 300px"></el-input>
             </el-form-item>
-            <el-form-item >
+            <!-- <el-form-item >
                 <el-button type="primary" @click="onSubmit('ipFormData')">确定</el-button>
                 <el-button @click="dialogFormVisible = false">取消</el-button>
-            </el-form-item>
+            </el-form-item> -->
         </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="btnCancle">取 消</el-button>
+            <el-button type="primary" @click="onSubmit('ipFormData')">确 定</el-button>
+        </span>
     </el-dialog>
 </el-container>
 </template>
@@ -135,13 +139,18 @@ export default {
         // 添加
         add() {
             this.ipFormData.name = ''
-            this.$refs.ipFormData.resetFields()
             this.dialogFormVisible = true
         },
+        // 关闭弹层
+        btnCancle() {
+            this.dialogFormVisible = false
+            this.$refs.ipFormData.resetFields()
+        },
         // 确定添加
         onSubmit(formName) {
             this.$refs[formName].validate(async(valid) => {
                 if (valid) {
+                    console.log(valid);
                     if (this.tableData.length > 0) {
                         this.tableData.forEach(item => {
                             this.repeatIp = item.ip == this.ipFormData.name
@@ -215,4 +224,12 @@ export default {
 </script>
 
 <style scoped>
+.dialog-footer {
+  display: block;
+  text-align: center;
+}
+.dialog-footer .el-button {
+    margin: 0 30px;
+
+}
 </style>