Vue3 二次封装Element Plus的el-pagination 分页组件

当我们使用表格时，常会使用分页组件，如果直接用element plus的分页组件，用得多了，未免有些繁琐，这时候将其二次封装会更加方便使用。

封装分页组件，主要使用了Vue3的v-model特性，可以在子组件中改变page,size这些属性，就不用额外在父组件中修改，让组件更加轻巧。

参考阅读- 组件事件 - 配合 v-model 使用

Pagination组件

<!-- el-pagination 二次封装 -->
<template>
  <div>
    <el-pagination
      v-model:current-page="curPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps({
  page: { type: Number, default: 1 },
  size: { type: Number, default: 10 },
  total: { type: Number, default: 0 },
  layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50, 100]
  }
})

const emit = defineEmits(['update:size', 'update:page', 'pagination'])

const pageSize = computed({
  get: () => props.size,
  set: (val) => {
    emit('update:size', val)
  }
})
const curPage = computed({
  get: () => props.page,
  set: (val) => {
    emit('update:page', val)
  }
})

function handleSizeChange() {
  emit('pagination')
}

function handleCurrentChange() {
  emit('pagination')
}
</script>

在父组件中使用Pagination

<Pagination
    v-model:page="formData.pageNum"
    v-model:size="formData.pageSize"
    :total="total"
    @pagination="fetchList"
    class="mt-3"
  />