scd_tools_ui/src/pages/mission/components/PageNation.vue

<template>
    <div style="position: absolute;bottom: -60px;right: 20px;">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch } from 'vue'
import task from '@/api/task'
export default {
    props: {
        totals: {
            type: Number,
            required: true,
        },
        pageNum: {
            type: Number,
            required: true
        },
        pageSize: {
            type: Number,
            required: true
        }
    },
    setup(props, { emit }) {
        let currentPage = ref(1)//页码
        let pageSize = ref(10)//页数
        let small = ref(false)
        let disabled = ref(false)
        let background = ref(false)
        let total = ref(100)//总数
        watch(() => props.totals, (newVal) => {
            total.value = newVal
        })
        watch(() => props.pageNum, (newVal) => {
            currentPage.value = newVal
            console.log(currentPage.value,'watch');
        },{
            deep:true
        })
        function reload() {
            currentPage.value = props.pageNum
            pageSize.value = props.pageSize
            total.value = props.totals
            console.log(currentPage.value,'页码');
        }
        function handleSizeChange(e) {//每页条数
            pageSize.value = e
            task.getTask({
                pageno: currentPage.value - 0,
                pagesize: pageSize.value - 0
            }).then(res => {
                total.value = res.count
                emit("pageBack", res.data)
            })
        }
        function handleCurrentChange(e) {//页码
            currentPage.value = e
            task.getTask({
                pageno: currentPage.value - 0,
                pagesize: pageSize.value - 0
            }).then(res => {
                total.value = res.count
                emit("currentBack",currentPage.value)
                emit("pageBack", res.data)
            })
        }
        onMounted(() => {
            reload()
        })
        return {
            currentPage,
            pageSize,
            small,
            disabled,
            background,
            total,
            reload,
            handleCurrentChange,
            handleSizeChange,
        }
    }
}
</script>

<style lang="scss" scoped></style>