pagination分页组件二次封装

1、pagination二次封装分页子组件

<template>
    <div :class="{ hidden: hidden }" class="pagination-container">
        <!-- v-model:page-size="pageSize"  每页显示条目个数 ； v-model:current-page="currentPage"  当前页数-->
        <!-- @size-change：	page-size 改变时触发 ； @current-change：	current-page 改变时触发 -->
        <el-pagination
           :background="background"
           :layout="layout"
           :page-sizes="pageSizes"
           :total="total"

           v-model:current-page="currentPage"
           v-model:page-size="pageSize" 
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"/>

    </div>
</template>

<script setup lang="ts">
import { reactive, PropType, computed } from "vue"
import { scrollTo } from '@utils/scroll-to';



//父传子
const props = defineProps({
    // <!-- 是否为分页按钮添加背景色 -->
    background: {
        type: Boolean,
        default: true,
    },
    // 组件布局，子组件名用，分隔
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
    },
    // 每页显示个数选择器的选项设置 【10,20,30,50,100】
    pageSizes: {
        //PropType对象是一个用于验证组件属性的对象。它定义了一些预定义的验证规则
        type: Array as PropType<number[]>,
        default(){
            return [5, 10, 20, 30, 50]
        }
    },
    total: {
        required: true,
        type: Number as PropType<number>,
        default: 0
    },
    //当前点击的页
    page: {
        type:Number,
        default: 1,
    },
    //不同的页段（10,20,50）
    limit: {
        type: Number,
        default: 20,
    },
    autoScroll: {
        type: Boolean,
        default: true,
    },
    hidden: {
        type:Boolean,
        default: false,
    }
})

// const state = reactive( { 
//     hidden : ''
    
// })

//触发父组件的数据
const emit = defineEmits(['update:page', 'update:limit', 'pagination'])

//点击当前页
const currentPage = computed<number | undefined>({
    get: () => props.page,
    set: (value) => {
        emit('update:page',value)
    }

})

//点击不同的页段（10,20,50）
const pageSize = computed<number | undefined>({
    get(){
        return props.limit;
    },
    set(val) {
        emit('update:limit',val);
    }
})

//	page-size 改变时触发------点击不同的页段--处理分页时改变每页显示数量的事件
function handleSizeChange(val: number) {
    emit('pagination', {page: currentPage, limit: val });
    if (props.autoScroll) { //调用scrollTo方法将页面滚动到指定位置
        scrollTo(0, 800);
    }

}

// current-page 改变时触发-------点击当前页
function handleCurrentChange(val: number) {
    currentPage.value = val;//拿到实际当前页
    emit('pagination', { page: val, limit: props.limit });
    if(props.autoScroll) {
        scrollTo(0, 800);
    }


}

</script>


<style scoped>

.hidden {

}

.pagination-container {

}
</style>

2、在父组件中使用pagination组件

 <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
            @pagination="handleQuery" />

const state = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 20,
    } as any,
    total: 0,
}）

const { queryParams，total } = toRefs(state);


function handleQueryTable() {
    state.loadingTsl = true
    getProductTslList({ productId: state.formData.productId, pageNum: 1, pageSize: 99999 }).then(({ data }) => {
        state.gridData = data.list;
        state.loadingTsl = false

    });
}


function handleQuery() {
    if (state.date) {
        state.queryParams.createTimeStart = state.date[0]
        state.queryParams.createTimeEnd = state.date[1]
    } else {
        state.queryParams.createTimeStart = null
        state.queryParams.createTimeEnd = null
    }
    listAbilityPages(state.queryParams).then(({ data }) => {
        state.abilityList = data.list;
        state.total = Number(data.totalCount);
        state.loading = false;
    });
}