fix(styles): 用户管理页面布局自适应屏幕高度 (fixed #253)

This commit is contained in:
Soybean 2023-07-19 23:14:33 +08:00
parent 8a3f66db7b
commit 0f7b9d5e2b

View File

@ -1,31 +1,40 @@
<template> <template>
<div class="h-full overflow-hidden"> <div class="overflow-hidden">
<n-card title="用户管理" :bordered="false" class="rounded-8px shadow-sm"> <n-card title="用户管理" :bordered="false" class="h-full rounded-8px shadow-sm">
<n-space class="pb-12px" justify="space-between"> <div class="flex-col h-full">
<n-space> <n-space class="pb-12px" justify="space-between">
<n-button type="primary" @click="handleAddTable"> <n-space>
<icon-ic-round-plus class="mr-4px text-20px" /> <n-button type="primary" @click="handleAddTable">
新增 <icon-ic-round-plus class="mr-4px text-20px" />
</n-button> 新增
<n-button type="error"> </n-button>
<icon-ic-round-delete class="mr-4px text-20px" /> <n-button type="error">
删除 <icon-ic-round-delete class="mr-4px text-20px" />
</n-button> 删除
<n-button type="success"> </n-button>
<icon-uil:export class="mr-4px text-20px" /> <n-button type="success">
导出Excel <icon-uil:export class="mr-4px text-20px" />
</n-button> 导出Excel
</n-button>
</n-space>
<n-space align="center" :size="18">
<n-button size="small" type="primary" @click="getTableData">
<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
刷新表格
</n-button>
<column-setting v-model:columns="columns" />
</n-space>
</n-space> </n-space>
<n-space align="center" :size="18"> <n-data-table
<n-button size="small" type="primary" @click="getTableData"> :columns="columns"
<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" /> :data="tableData"
刷新表格 :loading="loading"
</n-button> :pagination="pagination"
<column-setting v-model:columns="columns" /> flex-height
</n-space> class="flex-1-hidden"
</n-space> />
<n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" /> <table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
<table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" /> </div>
</n-card> </n-card>
</div> </div>
</template> </template>