编写组件


<template>
  <div :class="{ hidden: hidden }" class="pagination-container">
    <el-pagination
        v-model:current-page.sync="paginationData.current"
        v-model:page-size="paginationData.size"
        :style="{ float: props.isRight ? 'right' : '' }"
        :total="total"
        :small="small"
        :background="background"
        :layout="layout"
        :page-sizes="pageSizes"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'

const props = defineProps({
  // 总数
  total: {
    required: true,
    type: Number,
  },
  // 页码
  current: {
    type: Number,
    default: 1,
  },
  // 每页数量
  size: {
    type: Number,
    default: 10,
  },
  // 每页显示数量
  pageSizes: {
    type: Array,
    default() {
      return [10, 20, 50, 100, 200]
    },
  },
  // 显示组件布局
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper',
  },
  small: {
    type: Boolean,
    default: false,
  },
  // 是否为分页按钮添加背景色
  background: {
    type: Boolean,
    default: true,
  },
  autoScroll: {
    type: Boolean,
    default: true,
  },
  // 显示与否
  hidden: {
    type: Boolean,
    default: false,
  },
  // 是否居右
  isRight: {
    type: Boolean,
    default: false,
  },
})

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

const paginationData = reactive({
  current: props.current,
  size: props.size,
})

const handleSizeChange = (val: number) => {
  emit('update:size', val)
  emit('pagination', paginationData)
}

const handleCurrentChange = (val: number) => {
  emit('update:current', val)
  emit('pagination', paginationData)
}
</script>

<style scoped lang="scss">
.pagination-container {
  overflow-x: auto;
  margin-top: 20px;
}

.pagination-container.hidden {
  display: none;
}
</style>

使用组件


<template>
  <Pagination
      @pagination="handleChangePage"
      :total="state.tableData.total"
      :current="state.tableData.queryForm.current"
      :size="state.tableData.queryForm.size"
  />
</template>

<script setup lang="ts">
import {reactive} from 'vue';

const state = reactive({
  tableData: {
    total: 0,
    data: [],
    queryForm: {
      current: 1,
      size: 10,
    },
  },
});

// 分页操作
const handleChangePage = (item: { current: number; size: number }) => {
  state.tableData.queryForm.current = item.current;
  state.tableData.queryForm.size = item.size;
};
</script>