tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ pageContent组件，添加分页位置配置

Browse Source
This commit is contained in:
超凡
2025-04-11 01:07:28 +08:00
parent ac609c1282
commit 6bed716c0a
3 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/CURD/PageContent.vue
View File

@@ -315,14 +315,12 @@
</el-table> </el-table>
<!-- 分页 --> <!-- 分页 -->
<template v-if="showPagination"> <template v-if="showPagination">
<el-scrollbar> <el-scrollbar :class="['mt-3', { 'flex-x-end': contentConfig?.pagePosition === 'right' }]">
<div class="mt-[12px]">
<el-pagination <el-pagination
v-bind="pagination" v-bind="pagination"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
/> />
</div>
</el-scrollbar> </el-scrollbar>
</template> </template>
<!-- 导出弹窗 --> <!-- 导出弹窗 -->

6
src/components/CURD/PageSearch.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<el-card v-show="visible" v-bind="cardAttrs"> <el-card v-show="visible" v-bind="cardAttrs" class="mb-2.5!">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" :class="isGrid"> <el-form ref="queryFormRef" :model="queryParams" :inline="true" :class="isGrid">
<template v-for="(item, index) in formItems" :key="item.prop"> <template v-for="(item, index) in formItems" :key="item.prop">
<el-form-item <el-form-item
@@ -98,8 +98,8 @@ const cardAttrs = computed<IObject>(() => {
? { "v-hasPerm": [`${props.searchConfig.pageName}:query`] } ? { "v-hasPerm": [`${props.searchConfig.pageName}:query`] }
: {}; : {};
return props.searchConfig?.cardAttrs && props.searchConfig.cardAttrs instanceof Object return props.searchConfig?.cardAttrs && props.searchConfig.cardAttrs instanceof Object
? { class: "mb-2.5", shadow: "never", ...auth, ...props.searchConfig.cardAttrs } ? { shadow: "never", ...auth, ...props.searchConfig.cardAttrs }
: { class: "mb-2.5", shadow: "never", ...auth }; : { shadow: "never", ...auth };
}); });
// 是否使用自适应网格布局 // 是否使用自适应网格布局
const isGrid = computed(() => const isGrid = computed(() =>

10
src/components/CURD/types.ts
View File

@@ -6,6 +6,8 @@ import type {
PaginationProps, PaginationProps,
TableProps, TableProps,
ColProps, ColProps,
ButtonType,
CardProps,
} from "element-plus"; } from "element-plus";
import type PageContent from "./PageContent.vue"; import type PageContent from "./PageContent.vue";
import type PageForm from "./PageForm.vue"; import type PageForm from "./PageForm.vue";
@@ -69,7 +71,7 @@ export interface ISearchConfig {
// 默认展示的表单项数量(默认：3) // 默认展示的表单项数量(默认：3)
showNumber?: number; showNumber?: number;
// 卡片属性 // 卡片属性
cardAttrs?: IObject; cardAttrs?: Partial<CardProps>;
// 自适应网格布局(使用时表单不要添加 style: { width: "200px" }) // 自适应网格布局(使用时表单不要添加 style: { width: "200px" })
grid?: boolean; grid?: boolean;
} }
@@ -79,6 +81,8 @@ export interface IContentConfig<T = any> {
pageName: string; pageName: string;
// table组件属性 // table组件属性
table?: Omit<TableProps<any>, "data">; table?: Omit<TableProps<any>, "data">;
// 分页组件位置(默认：left)
pagePosition?: "left" | "right";
// pagination组件属性 // pagination组件属性
pagination?: pagination?:
| boolean | boolean
@@ -132,7 +136,7 @@ export interface IContentConfig<T = any> {
icon?: string; icon?: string;
name: string; name: string;
text: string; text: string;
type?: "primary" | "success" | "warning" | "danger" | "info"; type?: ButtonType;
} }
>; >;
// 表格工具栏右侧图标 // 表格工具栏右侧图标
@@ -198,7 +202,7 @@ export interface IContentConfig<T = any> {
icon?: string; icon?: string;
name: string; name: string;
text: string; text: string;
type?: "primary" | "success" | "warning" | "danger" | "info"; type?: ButtonType;
render?: (row: IObject) => boolean; render?: (row: IObject) => boolean;
} }
>; >;