组件开发--vue3+elementPlus 分页

vue3+elementPlus 分页

 "element-plus": "^2.3.8",
 "vue": "^3.0.4",

home.vue

<template>
    <TablePagination
        v-if="isPageable"
        :pageNum="pageable.pageNum"
        :pageSize="pageable.pageSize"
        :total="pageable.total"
        :on-size-change="handleSizeChange"
        :on-current-change="handleCurrentChange"
    />
</template>
<script setup>
    import TablePagination from '@/components/TablePagination'
    import { useTable } from '@/hooks/useTable'
    const { tableData, pageable, searchParam, getTableList, search, reset } = useTable(getfileRulesList, initSearch, true)
</script>

components/TablePagination.vue

<template>
    <el-pagination
        class="pagination"
        v-model:current-page="currentPageV"
        v-model:page-size="pageSizeV"
        :page-sizes="pageSizes"
        :total="total"
        :small="small"
        :disabled="disabled"
        :background="background"
        :layout="layout"
        @current-change="onCurrentChange"
        @size-change="onSizeChange"
    />
</template>

<script setup lang="ts">
import { computed } from 'vue'
interface Props {
    pageNum?: number //pageNum当前页面
    pageSize?: number //每页显示条数
    total?: number
    pageSizes?: number[]
    small?: boolean
    disabled?: boolean
    background?: boolean
    onSizeChange?: (pageSize: number) => void
    onCurrentChange?: (currentPage: number) => void
    onPrevClick?: (currentPage: number) => void
    onNextClick?: (currentPage: number) => void
    layout?: string
}

const props = withDefaults(defineProps<Props>(), {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    pageSizes: () => [10, 20, 30, 50],
    small: false,
    disabled: false,
    background: true,
    onSizeChange: () => {},
    onCurrentChange: () => {},
    onPrevClick: () => {},
    onNextClick: () => {},
    layout: 'total, sizes, prev, pager, next, jumper',
})
const emit = defineEmits([
    'update:page',
    'update:size',
    'onCurrentChange',
    'onSizeChange',
    'onPrevClick',
    'onNextClick',
])

const currentPageV = computed({
    get: () => {
        return props.pageNum
    },
    set: (val: number) => {
        console.log(val, 'val===111--currentPage')
        emit('update:page', val)
        emit('onCurrentChange', val)
        emit('onPrevClick', val)
        emit('onNextClick', val)
    },
})

const pageSizeV = computed({
    get: () => {
        return props.pageSize
    },
    set: (val: number) => {
        console.log(val, 'val===2222---pageSize')
        emit('update:page', val)
        emit('update:size', val)
        emit('onSizeChange', val)
    },
})
</script>

hooks/useTable.ts

import { Table } from './interface'
import { reactive, computed, toRefs } from 'vue'

/**
 * @description table 页面操作方法封装
 * @param {Function} api 获取表格数据 api 方法 (必传)
 * @param {Object} initParam 获取数据初始化参数 (非必传，默认为{})
 * @param {Boolean} isPageable 是否有分页 (非必传，默认为true)
 * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
 * */
export const useTable = (
    api?: (params: any) => Promise<any>,
    initParam: object = {},
    isPageable: boolean = true,
    dataCallBack?: (data: any) => any,
    requestError?: (error: any) => void,
) => {
    const state = reactive<Table.StateProps>({
        // 表格数据
        tableData: [],
        // 分页数据
        pageable: {
            // 当前页数
            pageNum: 1,
            // 每页显示条数
            pageSize: 10,
            // 总条数
            total: 0,
        },
        // 查询参数
        searchParam: {},
        // 初始化默认的查询参数
        searchInitParam: {},
    })

    /**
     * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
     * */
    const pageParam = computed({
        get: () => {
            return {
                pageNum: state.pageable.pageNum,
                pageSize: state.pageable.pageSize,
            }
        },
        set: (newVal: any) => {
            console.log('我是分页更新之后的值', newVal)
        },
    })

    /**
     * @description 获取表格数据
     * @return void
     * */
    const getTableList = async () => {
        if (!api) return
        try {
            state.searchInitParam = { ...initParam }
            state.searchParam = { ...state.searchInitParam, ...state.searchParam }

            const page = isPageable ? pageParam.value : {}
            const parmas = { ...state.searchParam, ...page }

            let { data } = await api(parmas)

            state.tableData = isPageable ? data.list : data
            dataCallBack && (data = dataCallBack(data))

            // 解构后台返回的分页数据 (如果有分页更新分页信息)
            if (isPageable) {
                // const { pageNum, pageSize, total } = data;
                const { total } = data
                const { pageNum, pageSize } = state.pageable
                updatePageable({ pageNum, pageSize, total })
            }
        } catch (error) {
            requestError && requestError(error)
        }
    }

    /**
     *
     * @param key 字段名
     * @param val 值
     */
    const change = (key: string, val: any) => {
        state.searchParam[key] = val
    }

    /**
     * @description 更新分页信息
     * @param {Object} pageable 后台返回的分页数据
     * @return void
     * */
    const updatePageable = (pageable: Table.Pageable) => {
        Object.assign(state.pageable, pageable)
    }

    /**
     * @description 表格数据查询
     * @return void
     * */
    const search = () => {
        state.pageable.pageNum = 1
        getTableList()
    }

    /**
     * @description 表格数据重置
     * @return void
     * */
    const reset = () => {
        state.pageable.pageNum = 1
        state.pageable.pageSize = 10
        // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
        state.searchParam = { ...state.searchInitParam }
        getTableList()
    }

    /**
     * @description 每页条数改变
     * @param {Number} val 当前条数
     * @return void
     * */
    const handleSizeChange = (val: number) => {
        state.pageable.pageNum = 1
        state.pageable.pageSize = val
        getTableList()
    }

    /**
     * @description 当前页改变
     * @param {Number} val 当前页
     * @return void
     * */
    const handleCurrentChange = (val: number) => {
        state.pageable.pageNum = val
        getTableList()
    }

    return {
        ...toRefs(state),
        getTableList,
        change,
        search,
        reset,
        handleSizeChange,
        handleCurrentChange,
    }
}