丁同亚的博客

夺朱非正色

导航

【bug】vue3 + ant 项目菜单切换白屏

虽然vue3组件支持多根节点,但还是建议只有一个根节点

> <template>
>   <div class="flex h-full gap-16px p-16px">
>     <!-- 左侧:用户列表 -->
>     <div class="w-280px flex-shrink-0">
>       <ACard title="用户列表" :bordered="false" class="h-full">
>         <UserTree
>           v-model="selectedUserId"
>           :tree-data="userTreeData ? [userTreeData] : []"
>           :loading="userTreeLoading"
>           @select="handleUserSelect"
>         />
>       </ACard>
>     </div>

>     <!-- 右侧:运营账号 -->
>     <PageContainer class="flex-1">
>       <!-- 搜索 -->
>       <template #header>
>         <HeaderSearch
>           v-model:model="searchParams"
>           :update-search-params="updateSearchParams"
>           @reset="resetSearchParams"
>           @search="getDataByPage"
>         />
>       </template>

>       <!-- 操作区 -->
>       <template #extra>
>         <TableHeaderOperation
>           v-model:columns="columnChecks"
>           :disabled-delete="checkedRowKeys.length === 0"
>           :loading="loading"
>           :add-btn="hasAuth(MYACCOUNTS.ADD)"
>           @add="handleAdd"
>           @refresh="getData"
>         />
>       </template>

>       <!-- 表格 -->
>       <ATable
>         ref="tableWrapperRef"
>         :columns="columns"
>         :data-source="data"
>         size="small"
>         :scroll="scrollConfig"
>         :loading="loading"
>         row-key="id"
>         :pagination="{
>           ...mobilePagination,
>           showTotal: total => `共 ${total} 条数据`,
>         }"
>         class="h-full"
>       />
>     </PageContainer>
>   </div>

>   <!-- 操作弹窗 -->
>   <OperateModal
>     v-model:visible="drawerVisible"
>     :operate-type="operateType"
>     :row-data="editingData"
>     :data-source="data"
>     @submitted="getDataByPage"
>   />
> </template>
> <template>
>   <div class="flex h-full gap-16px p-16px">
>     <!-- 左侧:用户列表 -->
>     <div class="w-280px flex-shrink-0">
>       <ACard title="用户列表" :bordered="false" class="h-full">
>         <UserTree
>           v-model="selectedUserId"
>           :tree-data="userTreeData ? [userTreeData] : []"
>           :loading="userTreeLoading"
>           @select="handleUserSelect"
>         />
>       </ACard>
>     </div>

>     <!-- 右侧:运营账号 -->
>     <PageContainer class="flex-1">
>       <!-- 搜索 -->
>       <template #header>
>         <HeaderSearch
>           v-model:model="searchParams"
>           :update-search-params="updateSearchParams"
>           @reset="resetSearchParams"
>           @search="getDataByPage"
>         />
>       </template>

>       <!-- 操作区 -->
>       <template #extra>
>         <TableHeaderOperation
>           v-model:columns="columnChecks"
>           :disabled-delete="checkedRowKeys.length === 0"
>           :loading="loading"
>           :add-btn="hasAuth(MYACCOUNTS.ADD)"
>           @add="handleAdd"
>           @refresh="getData"
>         />
>       </template>

>       <!-- 表格 -->
>       <ATable
>         ref="tableWrapperRef"
>         :columns="columns"
>         :data-source="data"
>         size="small"
>         :scroll="scrollConfig"
>         :loading="loading"
>         row-key="id"
>         :pagination="{
>           ...mobilePagination,
>           showTotal: total => `共 ${total} 条数据`,
>         }"
>         class="h-full"
>       />
>     </PageContainer>
>       <!-- 操作弹窗 -->
>   <OperateModal
>     v-model:visible="drawerVisible"
>     :operate-type="operateType"
>     :row-data="editingData"
>     :data-source="data"
>     @submitted="getDataByPage"
>   />
>   </div>


> </template>

posted on 2026-01-08 10:25  丁同亚的博客  阅读(8)  评论(0)    收藏  举报