菜单管理模块弹窗组件加v-if控制

src/layout/components/Menu/index.vue

 <template>
   <n-menu
     :mode="menuMode"
+    :accordion="true"
     :value="(currentRoute.title && currentRoute.meta.activeMenu) || currentRoute.title"
     :options="getMenuOptions"
     @update:value="handleMenuSelect"

src/views/system/dept/components/DeptModal.vue

       if (props.row.pid === 0) {
         row.pid = null
       }
+      console.log('====部门计算属性触发了====', row)
       return {
         title: props.row.name ? '修改部门' : '添加部门',
         show: props.visible,

src/views/system/dept/index.vue

 import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
-import { getDeptList, getDeptAll, deleteDept } from '@/api/system/dept/index.js'
+import {
+  getDeptList,
+  getDeptAll,
+  deleteDept
+} from '@/api/system/dept/index.js'
 import { h, unref, toRefs, ref, reactive, onMounted } from 'vue'
 import DeptModal from './components/DeptModal.vue'
 import info from './info.js'
         })
     }
 
-    return { ...toRefs(data), tableRef, loadDataTable, handleSearch, handleModal, deleteSingle }
+    return {
+      ...toRefs(data),
+      tableRef,
+      loadDataTable,
+      handleSearch,
+      handleModal,
+      deleteSingle
+    }
   }
 }
 </script>

src/views/system/menu/components/MenuModal.vue

       if (props.data.pid === 0) {
         row.pid = null
       }
+      console.log('菜单页面计算属性触发：', row)
       return {
-        show: props.visible,
         title: props.data.title ? '修改菜单' : '添加菜单',
+        show: props.visible,
         form: Object.assign(data.form, row),
         negativeText: '取消',
         positiveText: '确认'

src/views/system/menu/index.vue

   </div>
 
   <MenuModal
+    v-if="modalShow"
     v-model:visible="modalShow"
     :data="rowData"
     :menu-list="menuList"

src/views/system/role/index.vue

 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableSwitch from '@/components/DataTable/tools/Switch.vue'
-import { getRoleList, deleteRole, setRoleStatus } from '@/api/system/role/index'
+import {
+  getRoleList,
+  deleteRole,
+  setRoleStatus
+} from '@/api/system/role/index'
 import { h, ref, unref, toRefs, reactive } from 'vue'
 import table from './table.js'
 import info from './info.js'
     // 设置状态
     function setStatus(row) {
       console.log(row)
-      setRoleStatus({ id: row.data.id, status: row.value }).then(res => {
-        if (res.code === 0) {
-          handleSearch()
-          $message.success(res.msg)
-        } else {
-          $message.error(res.msg)
-        }
-      }).catch(e => {
-        console.log(e)
-      })
+      setRoleStatus({ id: row.data.id, status: row.value })
+        .then((res) => {
+          if (res.code === 0) {
+            handleSearch()
+            $message.success(res.msg)
+          } else {
+            $message.error(res.msg)
+          }
+        })
+        .catch((e) => {
+          console.log(e)
+        })
     }
 
     return {