Vue3基于element-plus分页器

    <el-pagination
      //当前页数
      v-model:current-page="currentPage"
      //每页显示条数
      v-model:page-size="pageSize"
      //每页显示条数选择器的选项设置
      :page-sizes="[10, 20, 30, 40]"
      :total="400"
      //page-size 改变时触发
      @size-change="handleSizeChange"
      //current-page 改变时触发
      @current-change="handleCurrentChange"
    />

发送网络请求

import zarkRequest from ".."
export function getUserList(queryInfo: any) {
  return zarkRequest.post({
    url:'/users/list',
    data: queryInfo
  })
}

在pinia中的逻辑

import { getUserList } from '@/servece/main/main'
import { defineStore } from 'pinia'
 
interface IMainState {
  userList: any[],
  totalCount: number
}

const useMainStore = defineStore('main', {
  state: ():IMainState => ({
    userList: [],
    totalCount: 0
  }),
  actions: {
    async featchUserList(queryInfo:any) {
      const res = await getUserList(queryInfo)
      const { totalCount, list } = res.data
      this.userList = list
      this.totalCount = totalCount  
    }
  }
})

export default useMainStore

• 当第一次进入页面时需要发送网络请求；
• 当页码发生改变时需要发送网络请求；
• 当每页显示条数发生改变时需要发送网络请求；

<template>
  <el-pagination
  layout="total, sizes, prev, pager, next, jumper"
  small="small"
  v-model:current-page="currentPage"
  v-model:page-size="pageSize"
  :page-sizes="[5, 10, 15, 20]"
  :total="totalCount"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
</template>

<script setup lang="ts">
import useMainStore from '@/stores/main';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
const currentPage = ref(1)
const pageSize = ref(5)
const mainStore = useMainStore()
const {userList, totalCount} = storeToRefs(mainStore)

//1 用于发送网络请求
function featchUserListData() {
  const size = pageSize.value
  const offset = (currentPage.value - 1) * size
  const info = { size,offset }
  mainStore.featchUserList(info)
}

//1-1第一次进入页面发送网络请求
featchUserListData()
//1-2当每页显示条数发生改变时需要发送网络请求；
const handleSizeChange = () => {
  //每页显示个数发生变化
  console.log(pageSize.value);
  featchUserListData()
}
//1-3当页码发生改变时需要发送网络请求
const handleCurrentChange = () => {
  //页码发生变化
  featchUserListData()
  console.log(currentPage.value);
}

</script>

到以上为止，分页器的功能就实现了。

当分页器的数据涉及组件间的通信时：

Search.vue

<template>
  <div class="search">
    <el-form ref="formRef" :model="searchForm" label-width="80px" class="form" size="large">
      <el-row>
        <el-col :span="8">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="searchForm.name" type="text"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="searchForm.realname" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btn">
      <el-button round @click="handlereset">重置</el-button>
      <el-button round @click="handelquery">查询</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { ElForm,  } from 'element-plus'
const emit = defineEmits(['queryClick', 'resetClick'])
const formRef = ref<InstanceType<typeof ElForm>>()

const searchForm = reactive({
  name: '',
  realname: '',
  cellphone: '',
  enable: '',
  createAt:''
})
const handlereset = () => {
  formRef.value?.resetFields()
  emit('resetClick')
}
const handelquery = () => {
  console.log(searchForm);
  emit('queryClick',searchForm)
  
}
</script>

User.vue

<template>
    <div class="user">
      <div class="search">
       <search @query-click="handelQueryClick" @reset-click="handleResetClick"></search>
      </div>
      <div class="content">
        <content ref="contentRef"></content>
      </div>
    </div>
</template>

<script setup lang="ts">
import Search from "./cpns/search.vue";
import Content from "./cpns/content.vue";
import { ref } from "vue";
const contentRef = ref<InstanceType<typeof Content >>()
const a:number = 1
const handelQueryClick = (searchFormData: any) => {
  contentRef.value?.handelqueryClick(searchFormData)
}
const handleResetClick = () => {
  contentRef.value?.handleResetClick()
}
</script>

Content.vue

  <el-pagination
  layout="total, sizes, prev, pager, next, jumper"
  small="small"
  v-model:current-page="currentPage"
  v-model:page-size="pageSize"
  :page-sizes="[5, 10, 15, 20]"
  :total="totalCount"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>

<script setup lang="ts">
import useMainStore from '@/stores/main';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
let currentPage = ref(1)
const pageSize = ref(5)
const mainStore = useMainStore()
const {userList, totalCount} = storeToRefs(mainStore)

//1 用于发送网络请求
function featchUserListData(searchFormData:any = {}) {
  const size = pageSize.value
  const offset = (currentPage.value - 1) * size
  const info = { size,offset }
  mainStore.featchUserList({...info, ...searchFormData})
}

//1-1第一次进入页面发送网络请求
featchUserListData()
const handleSizeChange = () => {
  //每页显示个数发生变化
  console.log(pageSize.value);
  featchUserListData()
}
const handleCurrentChange = () => {
  //页码发生变化
  featchUserListData()
  console.log(currentPage.value);
}
//重置
function handleResetClick() {
  currentPage.value = 1
  pageSize.value = 5
  featchUserListData()
}
// 搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题
function handelqueryClick(searchFormData:any) {
  currentPage.value = 1
  featchUserListData(searchFormData)
}

defineExpose({
  handleResetClick,
  handelqueryClick
})
</script>