fix: 用户管理,字典管理上一下二布局影响table表格溢出不显示问题

This commit is contained in:
秋帆
2024-09-03 13:44:04 +08:00
parent 5cfb0d795a
commit 23ca50c99d
4 changed files with 40 additions and 29 deletions

View File

@@ -71,19 +71,12 @@
<div class="gi-table__body" :class="`gi-table__body-pagination-${attrs['page-position']}`"> <div class="gi-table__body" :class="`gi-table__body-pagination-${attrs['page-position']}`">
<div class="gi-table__container"> <div class="gi-table__container">
<a-table ref="tableRef" :stripe="stripe" :size="size" column-resizable :bordered="{ cell: isBordered }" <a-table ref="tableRef" :stripe="stripe" :size="size" column-resizable :bordered="{ cell: isBordered }"
v-bind="{ ...attrs, columns: _columns }" :scrollbar="true" :pagination="false"> v-bind="{ ...attrs, columns: _columns }" :scrollbar="true" >
<template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped"> <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
<slot :key="key" :name="key" v-bind="scoped"></slot> <slot :key="key" :name="key" v-bind="scoped"></slot>
</template> </template>
</a-table> </a-table>
</div> </div>
<template v-if="attrs.pagination">
<slot name="pagination-left"></slot>
<slot name="custom-pagination" :pagination-props="attrs.pagination">
<a-pagination v-bind="attrs.pagination" />
</slot>
<slot name="pagination-right"></slot>
</template>
</div> </div>
</div> </div>
</template> </template>

View File

@@ -201,6 +201,7 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
.header { .header {
padding: 0 0 10px; padding: 0 0 10px;
.title { .title {
@@ -215,7 +216,6 @@
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
color: var(--color-text-3); color: var(--color-text-3);
margin-top: 12px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@@ -1,27 +1,27 @@
<template> <template>
<div class="table-page"> <div class="table-page">
<a-row justify="space-between" align="center" class="header"> <a-row justify="space-between" align="center" class="header page_header">
<a-space wrap> <a-space wrap>
<slot name="custom-title"> <slot name="custom-title">
<div class="title">字典管理</div> <div class="title">字典管理</div>
</slot> </slot>
</a-space> </a-space>
</a-row> </a-row>
<a-row align="stretch" :gutter="14" class="h-full"> <a-row align="stretch" :gutter="14" class="h-full page_content">
<a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="h-full ov-hidden"> <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="h-full ov-hidden">
<DictTree placeholder="请输入关键词" @node-click="handleSelectDict" /> <DictTree placeholder="请输入关键词" @node-click="handleSelectDict" />
</a-col> </a-col>
<a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden"> <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
<GiTable <GiTable
row-key="id" row-key="id"
:data="dataList" :data="dataList"
:columns="columns" :columns="columns"
:loading="loading" :loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 600 }" :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
:pagination="pagination" :pagination="pagination"
:disabled-tools="['size']" :disabled-tools="['size']"
:disabled-column-keys="['label']" :disabled-column-keys="['label']"
@refresh="search" @refresh="search"
> >
<template #custom-left> <template #custom-left>
<a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search"> <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
@@ -44,10 +44,10 @@
<template #action="{ record }"> <template #action="{ record }">
<a-space> <a-space>
<a-link v-permission="['system:dict:item:update']" @click="onUpdate(record)">修改</a-link> <a-link v-permission="['system:dict:item:update']" @click="onUpdate(record)">修改</a-link>
<a-link <a-link
v-permission="['system:dict:item:delete']" v-permission="['system:dict:item:delete']"
status="danger" status="danger"
@click="onDelete(record)" @click="onDelete(record)"
> >
删除 删除
</a-link> </a-link>
@@ -149,4 +149,13 @@ const onUpdate = (record: DictItemResp) => {
} }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.page_header {
flex: 0 0 auto;
}
.page_content {
flex: 1;
overflow: auto;
}
</style>

View File

@@ -1,13 +1,13 @@
<template> <template>
<div class="table-page"> <div class="table-page">
<a-row justify="space-between" align="center" class="header"> <a-row justify="space-between" align="center" class="header page_header">
<a-space wrap> <a-space wrap>
<slot name="custom-title"> <slot name="custom-title">
<div class="title">用户管理</div> <div class="title">用户管理</div>
</slot> </slot>
</a-space> </a-space>
</a-row> </a-row>
<a-row align="stretch" :gutter="14" class="h-full"> <a-row align="stretch" :gutter="14" class="h-full page_content">
<a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="h-full ov-hidden"> <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="h-full ov-hidden">
<DeptTree placeholder="请输入关键词" @node-click="handleSelectDept" /> <DeptTree placeholder="请输入关键词" @node-click="handleSelectDept" />
</a-col> </a-col>
@@ -213,4 +213,13 @@ const onResetPwd = (record: UserResp) => {
} }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.page_header {
flex: 0 0 auto;
}
.page_content {
flex: 1;
overflow: auto;
}
</style>