dz-app/pages/news/index/components/news-paging-list.vue

<template>
    <z-paging ref="paging" v-model="list" @query="handleQuery">
        <news-list class="p-30">
            <news-list-item v-for="item in list" :item="item"/>
        </news-list>
    </z-paging>
</template>

<script>
import {ref} from 'vue'
import {getNewsList} from "@/api/webApi/career-news";
import NewsList from "@/pages/index/components/news-list.vue";
import NewsListItem from "@/pages/index/components/news-list-item.vue";

export default {
    name: "news-paging-list",
    components: {NewsListItem, NewsList},
    props: {
        params: {
            type: Object,
            default: null
        }
    },
    setup(props) {
        const list = ref([])
        const paging = ref(null)

        const handleQuery = function (pageNum, pageSize) {
            getNewsList({...props.params, pageNum, pageSize})
                .then(res => paging.value.completeByTotal(res.rows, res.total))
                .catch(() => paging.value.complete(false))
        }

        return {
            list,
            paging,
            handleQuery
        }
    }
}
</script>

<style scoped>

</style>