前端分页组件
<template>
<div>
<el-button
plain
icon="el-icon-arrow-left"
size="mini"
:disabled="state.currentPage === 1"
@click="prev"
/>
<el-button
plain
icon="el-icon-arrow-right"
size="mini"
:disabled="state.currentPage === pageCount"
@click="next"
/>
</div>
</template>
<script setup>
import { defineEmit, defineProps, computed, useContext, reactive, watch, onMounted } from 'vue'
const { props, emit } = useContext()
defineProps({
pageSize: {
type: Number,
default: 10
},
data: {
type: Array,
required: true
}
})
defineEmit(['page'])
const state = reactive({
currentPage: 1
})
const total = computed(() => props.data.length)
const pageCount = computed(() => Math.ceil(props.data.length / props.pageSize))
watch(() => state.currentPage, () => {
handlePage()
})
onMounted(() => {
handlePage()
})
const prev = () => {
if (state.currentPage === 1) return
state.currentPage --
}
const next = () => {
if (state.currentPage === pageCount) return
state.currentPage ++
}
const handlePage = () => {
const start = (state.currentPage - 1) * props.pageSize
const end = state.currentPage * props.pageSize
emit('page', props.data.slice(start, end))
}
</script>