框架

• vue3

语法

• typeScript

UI组件库

• "@element-plus/icons-vue": "2.0.10",
• "element-plus": "2.2.27",

ts写法

<!--
 * @Author: SunnyYang
 * @Date: 2024-01-04 16:21:08
 * @LastEditors: SunnyYang
 * @LastEditTime: 2024-03-27 11:43:51
 * @Description: 
-->
<template>
    <el-pagination
        class="pagination"
        v-model:current-page="currentPageV"
        v-model:page-size="pageSizeV"
        :page-sizes="pageSizes"
        :total="total"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="onCurrentChange"
        @size-change="onSizeChange"
    />
</template>

<script setup lang="ts">
import { computed } from 'vue'
interface Props {
    pageNum?: number //pageNum当前页面
    pageSize?: number //每页显示条数
    total?: number
    pageSizes?: number[]
    small?: boolean
    disabled?: boolean
    background?: boolean
    onSizeChange?: (pageSize: number) => void
    onCurrentChange?: (currentPage: number) => void
    onPrevClick?: (currentPage: number) => void
    onNextClick?: (currentPage: number) => void
}

const props = withDefaults(defineProps<Props>(), {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    pageSizes: () => [10, 20, 30, 50],
    small: false,
    disabled: false,
    background: true,
    onSizeChange: () => {},
    onCurrentChange: () => {},
    onPrevClick: () => {},
    onNextClick: () => {},
})
const emit = defineEmits([
    'update:page',
    'update:size',
    'onCurrentChange',
    'onSizeChange',
    'onPrevClick',
    'onNextClick',
])

const currentPageV = computed({
    get: () => {
        return props.pageNum
    },
    set: (val: number) => {
        console.log(val, 'val===111--currentPage')
        emit('update:page', val)
        emit('onCurrentChange', val)
        emit('onPrevClick', val)
        emit('onNextClick', val)
    },
})

const pageSizeV = computed({
    get: () => {
        return props.pageSize
    },
    set: (val: number) => {
        console.log(val, 'val===2222---pageSize')
        emit('update:page', val)
        emit('update:size', val)
        emit('onSizeChange', val)
    },
})
</script>

js写法

<!--
 * @Author: SunnyYang
 * @Date: 2024-01-04 16:21:08
 * @LastEditors: SunnyYang
 * @LastEditTime: 2024-03-25 19:45:26
 * @Description: 
-->
<template>
  <div class="paginationContainter">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    />
  </div>
</template>

<script setup name='TablePagination'>
import { computed } from 'vue'

const props = defineProps({
  page: {
    type: Number, // 当前页数
    default: 1,
  },
  size: {
    type: Number, // 每页显示条数
    default: 10,
  },
  total: {
    type: Number,
    default: 0,
  },
  pageSizes: {
    type: Array,
    default: () => [10, 30, 50, 100],
  },
  small: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  background: {
    type: Boolean,
    default: true,
  },
  onSizeChange: {
    type: Function,
    default: () => {},
  },
  onCurrentChange: {
    type: Function,
    default: () => {},
  },
})

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

const currentPage = computed({
  get: () => {
    return props.page
  },
  set: (val) => {
    emit('update:page', val)
    emit('onCurrentChange', val)
  },
})

const pageSize = computed({
  get: () => {
    return props.size
  },
  set: (val) => {
    emit('update:page', val)
    emit('update:size', val)
    emit('onSizeChange', val)
  },
})
</script>

<style lang="scss" scoped>
.paginationContainter {
  display: flex;
  margin: 20px 16px;
  justify-content: flex-end;
}
</style>