菜单添加loading

src/views/menu.vue

 <template>
 <template>
-  <div class="system-menu card">
+  <div class="system-menu card" v-loading="delLoading">
     <div class="header">
     <div class="header">
       <el-form size="mini" :inline="true" label-width="80px">
       <el-form size="mini" :inline="true" label-width="80px">
         <el-form-item label>
         <el-form-item label>
@@ -26,6 +26,7 @@
       :title="isEdit ? '修改' : '新增'"
       :title="isEdit ? '修改' : '新增'"
       :visible.sync="dialogVisible"
       :visible.sync="dialogVisible"
       :close-on-click-modal="false"
       :close-on-click-modal="false"
+      v-loading="formLoading"
       :before-close="beforeClose"
       :before-close="beforeClose"
       width="820px">
       width="820px">
       <el-form
       <el-form
@@ -184,6 +185,8 @@ export default {
       loading: false,
       loading: false,
       sourceData: [],
       sourceData: [],
       dialogVisible: false,
       dialogVisible: false,
+      formLoading: false,
+      delLoading: false,
       editForm: {
       editForm: {
         name: '',
         name: '',
         pid: '0',
         pid: '0',
@@ -400,10 +403,10 @@ export default {
       // getApplication().then((res) => {
       // getApplication().then((res) => {
       //   if (res.code === 200) {
       //   if (res.code === 200) {
       //     this.applicationList = res.data || []
       //     this.applicationList = res.data || []
-          this.$nextTick(() => {
-            this.$refs.editForm && this.$refs.editForm.clearValidate()
-          })
-          this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.editForm && this.$refs.editForm.clearValidate()
+      })
+      this.dialogVisible = true
       //   }
       //   }
       // })
       // })
     },
     },
@@ -413,6 +416,7 @@ export default {
       } catch {
       } catch {
         return
         return
       }
       }
+      this.formLoading = true
       const api = this.isEdit ? updateMenu : addMenu
       const api = this.isEdit ? updateMenu : addMenu
       delete this.editForm.children
       delete this.editForm.children
       try {
       try {
@@ -443,6 +447,7 @@ export default {
         console.error(e)
         console.error(e)
       } finally {
       } finally {
         this.resetForm()
         this.resetForm()
+        this.formLoading = false
         this.dialogVisible = false
         this.dialogVisible = false
       }
       }
     },
     },
@@ -456,14 +461,17 @@ export default {
       } catch {
       } catch {
         return
         return
       }
       }
+      this.delLoading = true
       try {
       try {
         const res = await deleteMenu(item.id)
         const res = await deleteMenu(item.id)
         if (res.code === 200) {
         if (res.code === 200) {
           this.$message.success(res.message)
           this.$message.success(res.message)
-          this.getlist()
+          this.delLoading = false
+          await this.getlist()
         }
         }
       } catch (e) {
       } catch (e) {
         console.error(e)
         console.error(e)
+        this.delLoading = false
       }
       }
     },
     },
     clone() {
     clone() {