pagination封装

el-pagination 封装

前置：vue3、element-plus

方法一 :model

子组件

<!-- pagination.vue -->
<template>
  <el-pagination
    :current-page="pageNo"
    :page-size="pageSize"
    :page-sizes="pageSizeArr"
    layout="->,prev, pager, next, jumper,sizes,total"
    :total="total"
    @current-change="handleCurrentChange"
    @size-change="handleChangeSize" />
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue'
const $emit = defineEmits(['update:pageNo', 'update:pageSize'])
defineProps({
  pageNo: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 8
  },
  total: {
    type: Number,
    default: 0
  },
  pageSizeArr: {
    type: Array,
    default: () => [8, 12, 16]
  }
})
const handleCurrentChange = (newPage: number) => {
  $emit('update:pageNo', newPage)
}
const handleChangeSize = (newSize: number) => {
  $emit('update:pageSize', newSize)
}
</script>

父组件

<!-- 父组件关键代码 -->
<template>
  <Pagination :pageNo="pageNo" :pageSize="pageSize" :total="total" :pageSizeArr="pageSizeArr" @update:pageNo="getProjectList" @update:pageSize="changeSize" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
// 当前页
let pageNo = ref<number>(1)
// 每页显示多少条数据
let pageSize = ref<number>(8)
// 总条数
let total = ref<number>(80)
// 每页显示条数数组
const pageSizeArr = ref<number[]>([8, 11, 22])
// 获取项目列表数据
const getProjectList = (newPage: number) => {
  pageNo.value = newPage
  console.log(pageNo.value)
  // 异步获取数据
}
// 改变每页显示多少条数据
const changeSize = (newSize: number) => {
  pageSize.value = newSize
  console.log(pageNo.value, pageSize.value)
  // 异步获取数据
}
</script>

方法二 v-model:

子组件

<!-- pagination.vue 改动代码-->
<script>
const $emit = defineEmits(['changeSize', 'getProjectList', 'update:pageNo', 'update:pageSize'])

const handleCurrentChange = (newPage: number) => {
  $emit('update:pageNo', newPage)
  $emit('getProjectList')
}
const handleChangeSize = (newSize: number) => {
  $emit('update:pageSize', newSize)
  $emit('changeSize')
}
</script>

父组件

<!-- 父组件 改动代码-->
<Pagination v-model:pageNo="pageNo" v-model:pageSize="pageSize" :total="total" :pageSizeArr="pageSizeArr" @getProjectList="getProjectList" @changeSize="changeSize" />

总结：方法一和方法二区别不大，使用第二种方法要请求数据的话还是得自定义事件，方法二相当于方法一的简写（不请求数据的话）

<Pagination v-model:pageNo="pageNo" v-model:pageSize="pageSize" :total="total" :pageSizeArr="pageSizeArr" />

<!-- 以下的简写 -->

<Pagination :pageNo="pageNo" :pageSize="pageSize" :total="total" :pageSizeArr="pageSizeArr" @update:pageNo="pageNo = $event" @update:pageSize="pageSize = $event" />

方法三 v-model:+引用类型

子组件

<template>
  <el-pagination
    v-model:current-page="paginData.pageNo"
    v-model:page-size="paginData.pageSize"
    :page-sizes="paginData.pageSizeArr"
    layout="->,prev, pager, next, jumper,sizes,total"
    :total="paginData.total"
    @current-change="handleCurrentChange"
    @size-change="handleChangeSize" />
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue'
const $emit = defineEmits(['changeSize', 'getProjectList'])
defineProps({
  paginData: {
    type: Object,
    default: () => {
      return {
        pageNo: 1,
        pageSize: 8,
        total: 0,
        pageSizeArr: [8, 12, 16]
      }
    }
  }
})

const handleCurrentChange = () => {
  $emit('getProjectList')
}
const handleChangeSize = () => {
  $emit('changeSize')
}
</script>

父组件

<Pagination :paginData="paginData" @getProjectList="getProjectList" @changeSize="changeSize" />
<script lang="ts" setup>
let paginData = reactive({
  pageNo: 1,
  pageSize: 8,
  total: 80,
  pageSizeArr: [8, 11, 22]
})
</script>

从代码量来说，方法三的更简洁