VUE---分页完整版代码

父组件

<template>
  <paging :val1="dataLength" :val2="pageNow" :val3="pageAll" :val4="numbers" :val5="changePage" />
</template>

<script setup>
import paging from "@/views/pageing.vue";
import { ref, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();
let jsonArrayList = ref(Array.apply(null, { length: 200 }).map((item, index) => { return index + 1 }));

let dataLength = jsonArrayList.value.length;
// let dataLength = 200;
let numbers = ref(15);// 每页数据条数
let pageNow = ref(1); // 当前页
let pageAll = ref(Math.ceil(dataLength / numbers.value)); // 总页数
let changePage = ref(1);
</script>

子组件

<template>
    <div class="pagebox">
        <span ref="getpageFirst" class="pageBtn firstPage " @click="pageNow = 1">首页</span>
        <ul class="btnPages">
            <!-- 动态切换类名  -->
            <li :class="pageNow == itemNumList ? 'pageBtn focusePage' : 'pageBtn' " v-for="itemNumList in showPage()"
                @click="pageNow = itemNumList">{{ itemNumList }}</li>
        </ul>
        <span class="pageBtn lastPage" @click="pageNow = pageAll">尾页</span>
        <span class="pageBtn prePage" @click="pageNow > 1 ? pageNow-- : 0">上一页</span>
        <span class="pageBtn nextPage" @click="pageNow < pageAll ? pageNow++ : 0">下一页</span>
        <input class="inpbox" type="text" v-model="changePage"><span class="pageBtn" @click="changeFunpage">GO</span>
        <span class="pageContent">第{{ pageNow }}页,每页{{ numbers }}条, 总计{{ pageAll }}页,{{ dataLength }}条数据</span>
    </div>
</template>
<script setup>
import { ref, onMounted, computed, getCurrentInstance, nextTick } from "vue";
// 父传子--接收值
const jsonVal = defineProps({
    val1: Number, val2: Number, val3: Number, val4: Number, val5: Number,
})
let dataLength = ref(jsonVal.val1);
let pageNow = ref(jsonVal.val2);
let pageAll = ref(jsonVal.val3);
let numbers = ref(jsonVal.val4);
let changePage = ref(jsonVal.val5);
// go
function changeFunpage() {
    if (changePage.value > 0 && changePage.value <= pageAll.value) {
        pageNow.value = changePage.value
        return;
    } else { console.log(0) }
}
// 功能--按钮的显示函数
function showPage() { // 按钮的显示
    if (pageAll.value <= 4) {
        return pageAll.value
    } else if (pageNow.value == 1) {
        return [pageNow.value, +pageNow.value + 1, +pageNow.value + 2, +pageNow.value + 3]
    } else if (pageNow.value == 2) {
        return [pageNow.value - 1, pageNow.value, +pageNow.value + 1, +pageNow.value + 2, +pageNow.value + 3]
    } else if (pageNow.value == 3) {
        return [pageNow.value - 2, pageNow.value - 1, pageNow.value, +pageNow.value + 1, +pageNow.value + 2, +pageNow.value + 3]
    } else if (pageNow.value == 4) {
        return [pageNow.value - 3, pageNow.value - 2, pageNow.value - 1, pageNow.value, +pageNow.value + 1, +pageNow.value + 2, +pageNow.value + 3]
    } else if (pageNow.value == pageAll.value - 2) {
        return [pageAll.value - 5, pageAll.value - 4, pageAll.value - 3, pageAll.value - 2, pageAll.value - 1, pageAll.value]
    } else if (pageNow.value == pageAll.value - 1) {
        return [pageAll.value - 4, pageAll.value - 3, pageAll.value - 2, pageAll.value - 1, pageAll.value]
    } else if (pageNow.value > 4 && pageNow.value < pageAll.value - 2) {
        return [pageNow.value - 3, pageNow.value - 2, pageNow.value - 1, pageNow.value, +pageNow.value + 1, +pageNow.value + 2, +pageNow.value + 3]
    } else {
        return [pageAll.value - 3, pageAll.value - 2, pageAll.value - 1, pageAll.value]
    }
}
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

ul,
li {
    display: inline;
    list-style-position: inherit;
}

.pagebox {
    margin-top: 50px;
    padding-left: 50px;
    /* background-color: aqua; */
    display: flex;
    justify-content: start;
    align-items: center;
}

/* 正常 */
.pageBtn {
    padding: 5px 10px;
    background-color: rgb(210, 217, 215);
    margin-right: 10px;
    border-radius: 3px;
}

/* 选中 */
.focusePage {
    background-color: rgb(42, 138, 190);
    color: #fff;
    font-weight: bold;
}

.inpbox {
    width: 50px;
    height: 33px;
    border-right: transparent;
    padding: 10px;
}
</style>

效果

需要加省略号的在 return 的数组里 直接加上就好了