Vue3项目封装一个Element-plus Pagination分页

前言:后台系统分页肯定是离不开的,但是ui框架都很多,我们可以定义封装一种格式,所有项目按到这个结构来做.

实例:

第一步:在项目components组件新建一个分页组件,用来进行封装组件.

第二步:根据官方的进行定义,官方提供的这些,需要我们封装成动态模式

第三步:代码改造

import { ref ,defineProps,defineEmits} from 'vue'
const props = defineProps({
    //总数量
    total:{
        type:Number,
        default:1
    },
    //当前页码
    pageNo:{
        type:Number,
        default:1
    },
    //当前页数
    pageSize:{
      type:Number,
        default:10
    },
    //选择分页条数
    pageSizes:{
      type:Array,
        default:()=>[10, 20, 30, 40]
    },
    //布局
    layout:{
      type:String,
        default:'sizes, prev, pager, next, jumper'
    },
    background:{
      type:Boolean,
      default:true
    }
})

第四步:两个方法比较麻烦,要点击页码或者条数进行页面数据渲染,主要还是父子组件传值思想

const emit = defineEmits(['handleChange','update:pageNo','update:pageSize'])
const handleSizeChange = (val) => {
  //修改pageNo的值
  emit('update:pageSize',val)
  //调用请求
  emit('handleChange')
}
const handleCurrentChange = (val) => {
  //修改pageNo的值
  emit('update:pageNo',val)
  //调用请求
  emit('handleChange')
}

第五步:组件使用,组件直接引入即可,vue3不需要注册

import myPagination from '@/components/pagination/index.vue' //分页


     

组件需要定义总数total  请求回来数据进行复制给total

完整代码:  可以直接复制,自己组件直接引入使用即可.