feat: 列表页表格自适应剩余高度,分页贴底
- 新增通用 .list-page 类:flex 列布局、height:100% - 表格外包 .table-wrap(flex:1, min-height:0),el-table 设 height="100%" - 分页 flex-shrink:0 贴底 - 材料/供应商/品牌/用户 四个列表页启用 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
7ecdd06c4b
commit
eaf99b5efa
|
|
@ -48,6 +48,33 @@ a {
|
|||
padding: 20px 24px 28px;
|
||||
}
|
||||
|
||||
.list-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 20px 24px 16px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.list-page .toolbar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-page .page-title {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-page .table-wrap {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-page .pagination {
|
||||
flex-shrink: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<div class="list-page">
|
||||
<div class="page-title">品牌库</div>
|
||||
<div class="toolbar">
|
||||
<el-input
|
||||
|
|
@ -13,7 +13,8 @@
|
|||
<el-button type="primary" @click="onSearch">搜索</el-button>
|
||||
<el-button v-if="isAdmin" type="primary" @click="openCreate">新增品牌</el-button>
|
||||
</div>
|
||||
<el-table v-loading="tableLoading" :data="brands" border :max-height="560">
|
||||
<div class="table-wrap">
|
||||
<el-table v-loading="tableLoading" :data="brands" border height="100%">
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="name" label="品牌名称" min-width="180" />
|
||||
<el-table-column prop="description" label="品牌描述" min-width="240" show-overflow-tooltip />
|
||||
|
|
@ -32,6 +33,7 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<div class="list-page">
|
||||
<div class="page-title">供应商库</div>
|
||||
<div class="toolbar">
|
||||
<el-button v-if="isAdmin" type="primary" @click="openCreate">新增供应商</el-button>
|
||||
</div>
|
||||
<el-table v-loading="tableLoading" :data="factories" border :max-height="560">
|
||||
<div class="table-wrap">
|
||||
<el-table v-loading="tableLoading" :data="factories" border height="100%">
|
||||
<el-table-column prop="factory_name" label="供应商全称" />
|
||||
<el-table-column prop="short_name" label="供应商简称" />
|
||||
<el-table-column prop="dealer_name" label="经销商" />
|
||||
|
|
@ -28,6 +29,7 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<div class="list-page">
|
||||
<div class="page-title">材料管理</div>
|
||||
<div class="toolbar">
|
||||
<el-input v-model="filters.name" placeholder="材料名称" style="width: 200px" />
|
||||
|
|
@ -32,7 +32,8 @@
|
|||
<div class="toolbar-spacer" />
|
||||
</div>
|
||||
|
||||
<el-table v-loading="tableLoading" :data="materials" border :max-height="560">
|
||||
<div class="table-wrap">
|
||||
<el-table v-loading="tableLoading" :data="materials" border height="100%">
|
||||
<el-table-column prop="name" label="材料名称" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="major_category_display" label="材料大类" width="100" />
|
||||
<el-table-column prop="material_category" label="细分种类" min-width="140" show-overflow-tooltip />
|
||||
|
|
@ -60,6 +61,7 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<div class="list-page">
|
||||
<div class="page-title">用户管理</div>
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="openCreate">新增用户</el-button>
|
||||
</div>
|
||||
<el-table v-loading="tableLoading" :data="users" border :max-height="560">
|
||||
<div class="table-wrap">
|
||||
<el-table v-loading="tableLoading" :data="users" border height="100%">
|
||||
<el-table-column prop="username" label="用户名" />
|
||||
<el-table-column prop="role" label="角色">
|
||||
<template #default="scope">
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
|
|
|
|||
Loading…
Reference in New Issue