【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>
浙公网安备 33010602011771号