feat: pageContent组件,分页按钮固定位置

This commit is contained in:
超凡
2025-04-22 23:02:46 +08:00
parent fe295bcbba
commit 2899e13ecd
3 changed files with 14 additions and 8 deletions

View File

@@ -1,5 +1,7 @@
<template>
<el-card shadow="never">
<div
class="rounded bg-[var(--el-bg-color)] border border-[var(--el-border-color)] p-5 h-full md:flex flex-1 flex-col md:overflow-auto"
>
<!-- 表格工具栏 -->
<div class="flex flex-col md:flex-row justify-between gap-y-2.5 mb-2.5">
<!-- 左侧工具栏 -->
@@ -37,6 +39,7 @@
</template>
</div>
</div>
<!-- 列表 -->
<el-table
ref="tableRef"
@@ -44,6 +47,7 @@
v-bind="contentConfig.table"
:data="pageData"
:row-key="pk"
class="flex-1"
@selection-change="handleSelectionChange"
@filter-change="handleFilterChange"
>
@@ -180,16 +184,18 @@
</el-table-column>
</template>
</el-table>
<!-- 分页 -->
<template v-if="showPagination">
<el-scrollbar :class="['mt-3', { 'flex-x-end': contentConfig?.pagePosition === 'right' }]">
<div v-if="showPagination" class="mt-4">
<el-scrollbar :class="['h-8!', { 'flex-x-end': contentConfig?.pagePosition === 'right' }]">
<el-pagination
v-bind="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-scrollbar>
</template>
</div>
<!-- 导出弹窗 -->
<el-dialog
v-model="exportsModalVisible"
@@ -314,7 +320,7 @@
</div>
</template>
</el-dialog>
</el-card>
</div>
</template>
<script setup lang="ts">

View File

@@ -1,5 +1,5 @@
<template>
<div v-show="visible" v-bind="{ style: { 'margin-bottom': '12px' }, ...cardAttrs }">
<div v-show="visible">
<el-card v-bind="cardAttrs">
<el-form ref="queryFormRef" :model="queryParams" v-bind="formAttrs" :class="isGrid">
<template v-for="(item, index) in formItems" :key="item.prop">
@@ -105,7 +105,7 @@ const showNumber = computed(() =>
);
// 卡片组件自定义属性(阴影、自定义边距样式等)
const cardAttrs = computed<IObject>(() => {
return { shadow: "never", ...props.searchConfig?.cardAttrs };
return { shadow: "never", style: { "margin-bottom": "12px" }, ...props.searchConfig?.cardAttrs };
});
// 表单组件自定义属性label位置、宽度、对齐方式等
const formAttrs = computed<IForm>(() => {

View File

@@ -1,5 +1,5 @@
<template>
<div class="app-container">
<div class="app-container h-full flex flex-1 flex-col">
<div class="flex-x-between mb-10">
<el-link
href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/curd/index.vue"