Vue3基于element-plus的分页器实现

当我们数据过多时，就需要用到分页器，一般都是请求后端接口来实现，具体实现方法如下：

本案例用到vue3、composition_API、vuex、element-plus框架

分页器标签：里面有三个很重要的配置：current-page、page-size 、total

 <template #pagination>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            //当前页数
            :current-page="page"
            :page-sizes="[5, 10, 20, 50, 100]"
             //当前页数显示的总条数
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            //内容总个数
            :total="total"
            class="pagin"
          >
          </el-pagination>
        </template>

创建一个reactive对象用来保存分页数据，并负责将数据传给服务器

 const pagination = reactive({
      page: 1,
      pageSize: 10
    })

创建一个用来保存实现效果的方法,并交给vuex进行数据处理，这里用到的是

import {useStore} form 'vuex'
const store=useStore()
//定义两个ref对象用来接收state传输来的数据
const pageData=ref(null)
const total=ref(null)
//监听分页器变化，让分页器发生变化的时候继续向服务器请求数据
wacth(pagination ,()=>hook())
const hook=()=>{
//将数据分发到vuex的actions
store.dispatch("getListAction",{...pagination })
//拿到分页数据
pageData.value=computed(()=>store.state.pageData)
//拿到分页条数
total.value=computed(()=>store.state.total)
}
//页面开启需要请求数据所以调用封装好的函数
hook()
//将数据return出去
return {
pagination,pageData,total
}

在vuex的逻辑实现

const Module = {
  namespaced: true,
  state() {
    return {
      pageData: [],
      total: []
    }
  },
  getters: {},
  mutations: {
    //将获取到的数据保存到state
    getListCommit(state, playLoad) {
      state.pageData = playLoad
    },
    getListCommitTotal(state, playLoad) {
      state.total = playLoad
    }
  },
  actions: {
    async getListAction({ commit }, playLoad) {
      //请求服务器接口 并且将传过来的数据传给服务器
      const result = await getList(playLoad)
      console.log(result)
      //判断服务器状态
      if (result.code == 200) {
        //将服务器获取的数据交给mutations
        commit('getListCommit', result.data.list)
        //从服务器获取的数据总个数
        commit('getListCommitTotal', result.data.total)
      }
    }
  }
}

export default Module

service中的逻辑

//从服务器获取数据，并将数据传给data
export function getListService(obj) {
  //封装一个axios请求
  return request({
    method: 'post',
    url: '服务器地址',
    data: obj
  })
}

分页器功能实现完成