界面效果

切换页码数据展示正常

直接上代码 使用的vue3

<template>

    <div class="eventContent">
        <div class="list">
            <div class="listItem" v-for="item in displayedListData ">
                <div class="listItemTitle">{{ item.title }}</div>
                <div class="tagDate">
                    <div class="tagGroup" v-for="tag in item.tag">
                        <t-tag style="margin-right: 5px;">{{ tag }}</t-tag>
                    </div>
                    <div class="date">
                        来源：{{ item.web }} 丨{{ item.date }}
                    </div>
                </div>
            </div>
        </div>
        <t-pagination :current="currentPage" :total="totalItems" :pageSize="pageSize" @current-change="handlePageChange"
            @page-size-change="handlePageSizeChange" />
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue";
const listData = ref([
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' },
    { title: 'xxx', tag: ['标签1', '标签2', '标签3'], web: 'xxx.com', date: '2022-11-05' }
    ])
const total = ref(listData.value.length)
// 初始页码和每页数据量  
const currentPage = ref(1);
const pageSize = ref(8);
// 计算总项数  
const totalItems = computed(() => listData.value.length);
// 计算当前页需要显示的数据  
const displayedListData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return listData.value.slice(start, end);
});

// 处理分页变化事件  
function handlePageChange(val) {
    currentPage.value = val;
}
// 处理每页数据量发生变化事件
function handlePageSizeChange(val) {
    pageSize.value = val;
}
const nowMenu = ref('all');
const btnTab = ref([{ name: '全部', value: 'all' }, { name: '名产品', value: 'product' }])
const tabMenu = (item) => {
    nowMenu.value = item.value;
}

</script>
<style lang="less" scoped>
.eventContent {
    position: relative;
    /deep/ .t-pagination__total {
        position: absolute;
        left: 0;
        margin-left: 1%;
    }

    width: 100%;
    height: auto;
    z-index: 1;
    background: #F0F5FB;
    border-radius: 5px;


    .list {
        background: #F0F5FB;
        width: 100%;

        .listItem:nth-child(2n) {
            width: 98%;
            height: 80px;
            background: #F7F9FF;
            margin: 0 auto;
            display: flex;
            flex-direction: column;

            .listItemTitle {
                font-size: 16px;
                font-weight: 600;
                text-align: left;
                margin: 10px 0 10px 10px;
            }

            .tagDate {
                display: flex;
                margin-top: 5px;
                position: relative;

                .tagGroup {
                    margin-left: 8px
                }

                .date {
                    position: absolute;
                    right: 5px;
                    color: #A6A9AD;
                }
            }
        }

        .listItem:nth-child(2n+1) {
            width: 98%;
            height: 80px;
            background: #fff;
            margin: 0 auto;
            display: flex;
            flex-direction: column;

            .listItemTitle {
                font-size: 16px;
                font-weight: 600;
                text-align: left;
                margin: 10px 0 10px 10px;
            }

            .tagDate {
                display: flex;
                margin-top: 5px;
                position: relative;

                .tagGroup {
                    margin-left: 8px
                }

                .date {
                    position: absolute;
                    right: 5px;
                    color: #A6A9AD;
                }
            }
        }
    }
}
</style>