示例结构调整,避免页面出现空白

This commit is contained in:
ahjung
2025-10-10 15:31:43 +08:00
parent 447bdcc355
commit 3bd0d28e05

View File

@@ -1,64 +1,70 @@
<template> <template>
<n-card :bordered="false"> <n-flex vertical>
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"> <n-card :bordered="false">
<template #statusSlot="{ model, field }"> <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
<n-input v-model:value="model[field]" /> <template #statusSlot="{ model, field }">
</template> <n-input v-model:value="model[field]" />
</BasicForm> </template>
</n-card> </BasicForm>
<n-card :bordered="false" class="mt-3"> </n-card>
<BasicTable <n-card :bordered="false">
:columns="columns" <BasicTable
:request="loadDataTable" :columns="columns"
:row-key="(row:ListData) => row.id" :request="loadDataTable"
ref="actionRef" :row-key="(row:ListData) => row.id"
:actionColumn="actionColumn" ref="actionRef"
@update:checked-row-keys="onCheckedRow" :actionColumn="actionColumn"
:scroll-x="1090" @update:checked-row-keys="onCheckedRow"
:striped="true" :scroll-x="1090"
> :striped="true"
<template #tableTitle>
<n-button type="primary" @click="addTable">
<template #icon>
<n-icon>
<PlusOutlined />
</n-icon>
</template>
新建
</n-button>
</template>
<template #toolbar> </template>
</BasicTable>
<n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="新建">
<n-form
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="80"
class="py-4"
> >
<n-form-item label="名称" path="name"> <template #tableTitle>
<n-input placeholder="请输入名称" v-model:value="formParams.name" /> <n-button type="primary" @click="addTable">
</n-form-item> <template #icon>
<n-form-item label="地址" path="address"> <n-icon>
<n-input type="textarea" placeholder="请输入地址" v-model:value="formParams.address" /> <PlusOutlined />
</n-form-item> </n-icon>
<n-form-item label="日期" path="date"> </template>
<n-date-picker type="datetime" placeholder="请选择日期" v-model:value="formParams.date" /> 新建
</n-form-item> </n-button>
</n-form> </template>
<template #action> <template #toolbar> </template>
<n-space> </BasicTable>
<n-button @click="() => (showModal = false)">取消</n-button>
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button> <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="新建">
</n-space> <n-form
</template> :model="formParams"
</n-modal> :rules="rules"
</n-card> ref="formRef"
label-placement="left"
:label-width="80"
class="py-4"
>
<n-form-item label="名称" path="name">
<n-input placeholder="请输入名称" v-model:value="formParams.name" />
</n-form-item>
<n-form-item label="地址" path="address">
<n-input type="textarea" placeholder="请输入地址" v-model:value="formParams.address" />
</n-form-item>
<n-form-item label="日期" path="date">
<n-date-picker
type="datetime"
placeholder="请选择日期"
v-model:value="formParams.date"
/>
</n-form-item>
</n-form>
<template #action>
<n-space>
<n-button @click="() => (showModal = false)">取消</n-button>
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
</n-space>
</template>
</n-modal>
</n-card>
</n-flex>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>