分页器组件剥离，父组件同步操作代码记录

将该文件设置在组件下，

![[Pasted image 20240831194439.png]]![[Pasted image 20240831194442.png]]

一、设置分页器基本元素

publicPagination.vue

<div class="pagination">

        <el-pagination size="small" background layout=" prev, pager, next, total"  class="mt-4"

        :total="total" :current-page="page" :page-size="pageSize"

        @current-change="handleCurrentChange"/>

    div>

这个三个变量，一个是total总页数，page当前页，pageSize每页大小
同时设置了页面变化处理函数。

二、设置页数和分页大小

这里的页数和每条页数最好设置在api中，到处写值会乱

// 当前页数

const page = ref(1)

// 每页条数

const pageSize = ref(5)

// 定义传入父组件的方法变量

const emit=defineEmits(['paginAtion'])

// 处理currentpage变化方法

const handleCurrentChange = (val:any) => {

    page.value = val

    emit('paginAtion', {page:page.value, pageSize:pageSize.value})

}

这里设置了方法，方法修改了当前页面值，并且emit出去了一个函数，返回了两个值，是page和pageSize的值。

api中这样写：

import { $get, $post } from '../utils/request.ts'

export const PAGE = 1

export const PAGESIZE = 10
// 返回角色列表 接口http://127.0.0.1/my/roleList?page=&pageSize=3

export const $getRoleList = async (page: number = PAGE, pageSize: number = PAGESIZE) => {

    let ret = await $get(`my/roleList?page=${page}&pageSize=${pageSize}`)

    return ret.data

}

这样分页器就可以直接导入

import { PAGE, PAGESIZE } from '../api/role';

三、传入父组件同步分页变化

这里随便定义一个变量，这个变量处理currentpage变化时，分页变化

// 定义传入父组件的方法变量

const emit = defineEmits(['paginAtion'])

// 处理currentpage变化方法

const handleCurrentChange = (val: any) => {

    page.value = val

    emit('paginAtion', { page: page.value, pageSize: pageSize.value })

}

此时父组件操作这个paginAtion变量，就可以控制分页变化

四、父组件导入组件

注意这里添加了@paginAtion的值，这个值就是控制页面变化

<PublicPagination :total="total" @paginAtion="fenctData">PublicPagination>

这里定义了total和paginAtion，total定义的是总数，这里的总数通过axios传回来获取。paginAtion是定义了一个函数接受handleCurrentChange返回的对象。

这里定义fenctData函数，每次页面发生变化，分页器组件将同步处理handleCurrentChange

// 接收分页子组件传过来的数据 current-page变化时触发

const fenctData = (obj: any) => {

    loadRoles(obj.page, obj.pageSize)

}

这里是loadRoles函数

// 定义总条数

const total = ref(0)

  

// 加载角色列表，打问号代表可以为空值

const loadRoles = async (page?:any, pageSize?:any) => {
	// 请求api，获取数据库的列表， 这里page和pagesize为空时，默认api中设定的默认值
    let ret = await $getRoleList(page, pageSize)

    if (ret.code == 200) {

        roleList.value = ret.data

        total.value = ret.total

        // console.log(roleList.value)

        ElMessage.success(ret.msg)

    }

    else {

        ElMessage.error(ret.msg)

    }

  

    // console.log(ret)

}

// 页面加载时触发
onMounted(() => {

    loadRoles()

})