bd4rr/vue-naive-admin
1
0
Fork 0
mirror of https://github.com/zclzone/vue-naive-admin.git synced 2025-08-08 20:29:00 +08:00
Code

feat: 优化crud表格弹性高度

Browse Source
This commit is contained in:
zclzone 2025-05-19 11:21:45 +08:00
parent 7243f4f38e
commit 0fe0b9d41b
1 changed files with 43 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/me/crud/index.vue
View File

@ -7,48 +7,52 @@
---------------------------------> --------------------------------->
<template> <template>
<AppCard v-if="$slots.default" bordered bg="#fafafc dark:black" class="mb-30 min-h-60 rounded-4"> <div class="h-full flex flex-col overflow-hidden">
<form class="flex justify-between p-16" @submit.prevent="handleSearch()"> <AppCard v-if="$slots.default" bordered bg="#fafafc dark:black" class="mb-30 min-h-60 rounded-4">
<n-scrollbar x-scrollable> <form class="flex justify-between p-16" @submit.prevent="handleSearch()">
<n-space :wrap="!expand || isExpanded" :size="[32, 16]" class="p-10"> <n-scrollbar x-scrollable>
<slot /> <n-space :wrap="!expand || isExpanded" :size="[32, 16]" class="p-10">
</n-space> <slot />
</n-scrollbar> </n-space>
<div class="flex-shrink-0 p-10"> </n-scrollbar>
<n-button ghost type="primary" @click="handleReset"> <div class="flex-shrink-0 p-10">
<i class="i-fe:rotate-ccw mr-4" /> <n-button ghost type="primary" @click="handleReset">
重置 <i class="i-fe:rotate-ccw mr-4" />
</n-button> 重置
<n-button attr-type="submit" class="ml-20" type="primary">
<i class="i-fe:search mr-4" />
搜索
</n-button>
<template v-if="expand">
<n-button v-if="!isExpanded" type="primary" text @click="toggleExpand">
<i class="i-fe:chevrons-down ml-4" />
展开
</n-button> </n-button>
<n-button v-else text type="primary" @click="toggleExpand"> <n-button attr-type="submit" class="ml-20" type="primary">
<i class="i-fe:chevrons-up ml-4" /> <i class="i-fe:search mr-4" />
收起 搜索
</n-button> </n-button>
</template>
</div>
</form>
</AppCard>
<NDataTable <template v-if="expand">
:remote="remote" <n-button v-if="!isExpanded" type="primary" text @click="toggleExpand">
:loading="loading" <i class="i-fe:chevrons-down ml-4" />
:scroll-x="scrollX" 展开
:columns="columns" </n-button>
:data="tableData" <n-button v-else text type="primary" @click="toggleExpand">
:row-key="(row) => row[rowKey]" <i class="i-fe:chevrons-up ml-4" />
:pagination="isPagination ? pagination : false" 收起
@update:checked-row-keys="onChecked" </n-button>
@update:page="onPageChange" </template>
/> </div>
</form>
</AppCard>
<NDataTable
:remote="remote"
:loading="loading"
:scroll-x="scrollX"
:columns="columns"
:data="tableData"
:row-key="(row) => row[rowKey]"
:pagination="isPagination ? pagination : false"
flex-height
class="flex-1"
@update:checked-row-keys="onChecked"
@update:page="onPageChange"
/>
</div>
</template> </template>
<script setup> <script setup>