1

src/pages/sys/menus/Menus.vue

@@ -17,14 +17,21 @@
       <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
       <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
     </div>
-
-    <ElTable v-loading="searching" :data="tableData"
-      :load="treeLoad" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    <!--
+       lazy
+      :load="treeLoad"
+      -->
+    <ElTable v-loading="searching"
+      :data="tableData"
+      lazy
+      :load="treeLoad"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      @expand-change="treeLoad"
       cell-class-name="table-cell"
       class="table-list"
       empty-text="暂无数据"
       header-row-class-name="table-header"
-      lazy
+      ref="dataTable"
       row-key="id">
       <!-- <ElTableColumn type="expand" width="60"/> -->
       <ElTableColumn label="图标" prop="icon" width="100">
@@ -84,12 +91,14 @@ import { elIcons } from '@/common/element/element.ts'
 import MenuForm from '@/pages/sys/menus/MenuForm.vue'
 import Strings from '@/common/utils/strings.ts'
 import AIcon from '@/components/a-icon/AIcon.tsx'
+import type { TableInstance } from 'element-plus'
 
 const tableData = ref<MenuTypes.SysMenu[]>([])
 const searchForm = reactive<MenuTypes.SearchForm>({})
 const searching = ref(false)
 const showSearchForm = ref(true)
 const menuFormIns = useTemplateRef<InstanceType<typeof MenuForm>>('menuForm')
+const dataTableIns = useTemplateRef<InstanceType<TableInstance>>('dataTable')
 const deling = ref(false)
 
 function showDialog(data?: MenuTypes.MenuForm) {
@@ -131,6 +140,7 @@ function listAll() {
       tableData.value = []
       tableData.value = res.data?.map(it => {
         it.hasChildren = true
+        it.children = []
         return it
       }) ?? []
     })
@@ -139,14 +149,23 @@ function listAll() {
     })
 }
 
-function treeLoad(row: MenuTypes.SysMenu, _: any, resolve: (data: MenuTypes.SysMenu[]) => void) {
+function treeLoad(row: MenuTypes.SysMenu, expanded: boolean, resolve: (data: MenuTypes.SysMenu[]) => void) {
+  if (resolve == null && !expanded) return
   searching.value = true
    MenuApi.listAll({...searchForm, pid: row.id})
    .then(res => {
+     if (resolve!=null){
        resolve(res.data?.map(it => {
          it.hasChildren = true
          return it
        }) ?? [])
+     } else {
+       dataTableIns.value.updateKeyChildren(row.id,res.data?.map(it => {
+         it.hasChildren = true
+         it.children = []
+         return it
+       }) ?? [])
+     }
    })
    .finally(() => {
    searching.value = false