表格优化

src/views/auth/menu/index.vue

@@ -1,38 +1,42 @@
 <template>
-    <TableHeader>
-        <template v-slot:operation>
-            <el-button type='primary' @click='addMenu'>新增</el-button>
-        </template>
-    </TableHeader>
-    <Table ref='tableRef' :pagination='false' />
-    <popupForm ref='popupRef'></popupForm>
+    <div class='default-main'>
+        <TableHeader>
+            <template v-slot:operation>
+                <el-button :icon='Plus' type='primary' @click='addMenu'>添加</el-button>
+            </template>
+        </TableHeader>
+        <Table ref='tableRef' :pagination='false' />
+        <popupForm ref='popupRef'></popupForm>
+    </div>
 </template>
 <script setup lang='ts'>
+import { Plus } from '@element-plus/icons-vue'
 import { ref, onMounted, provide } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import popupForm from './popupForm.vue'
+import { useNavTabs } from '@/stores/navTabs'
 
 defineOptions({
     name: 'auth/menu'
 })
 const tableRef = ref()
 const popupRef = ref()
+const navTabs = useNavTabs()
 const tableStore = new TableStore({
-    url: '/user-boot/function/functionTree',
+    url: '/user-boot/function/getRouteMenu',
     column: [
-        { type: 'selection', align: 'center', width: '60' },
-        { label: '菜单名称', prop: 'title', align: 'left' },
+        { title: '菜单名称', field: 'title', align: 'left', treeNode: true },
         {
-            label: '图标',
-            prop: 'icon',
+            title: '图标',
+            field: 'icon',
             align: 'center',
             width: '60',
             render: 'icon'
         },
         {
-            label: '操作',
+            title: '操作',
             align: 'center',
             width: '130',
             render: 'buttons',
@@ -54,10 +58,10 @@ const tableStore = new TableStore({
                     icon: 'el-icon-Delete',
                     render: 'confirmButton',
                     popconfirm: {
-                        confirmButtonText:'确认',
+                        confirmButtonText: '确认',
                         cancelButtonText: '取消',
                         confirmButtonType: 'danger',
-                        title: '确定删除该菜单吗？',
+                        title: '确定删除该菜单吗？'
                     },
                     click: (row) => {
                         popupRef.value.open('编辑菜单', row)
@@ -71,7 +75,22 @@ provide('tableStore', tableStore)
 
 onMounted(() => {
     tableStore.table.ref = tableRef.value
-    tableStore.index()
+    // tableStore.index()
+    const handlerRouter = (arr: any[]) => {
+        return arr.map((item: any, index: number) => {
+            if (item.children && item.children.length > 0) {
+                item.children = handlerRouter(item.children)
+            }
+            return {
+                ...item,
+                title: item.meta.title,
+                icon: item.meta.icon,
+                id: index
+            }
+        })
+    }
+    tableStore.table.data = handlerRouter(navTabs.state.tabsViewRoutes)
+    tableStore.table.loading = false
 })
 const addMenu = () => {
     console.log(popupRef)

src/views/auth/role.vue

@@ -1,3 +1,3 @@
 <template>
-    role
+    <div>123</div>
 </template>