scd_tools_ui/src/pages/system/components/Pagination.vue

<template>
    <div>
        <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[10, 20, 30, 100]"
            :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, watch } from 'vue'
export default {
    props: {
        totals: {
            type: Number,
            required: true,
        },//总条数
        pages: {
            type: Number,
            required: true,
        },//SetModule.vue传过来的页码
        pageNum: {
            type: Number,
            required: true
        },//SetModule.vue传过来的页数
    },
    setup(props, { emit }) {
        let page = ref(1)//页码
        let size = ref(10)//页数
        let total = ref(0)//总数
        let disabled = ref(false)
        let background = ref(false)
        watch(() => props.totals, (newVal) => {
            total.value = newVal
        })
        watch(()=>props.pageNum,(newVal)=>{
            size.value = newVal
            console.log(size.value,'watch');
        },{
            deep:true
        })
        function reload() {
            total.value = props.totals
            page.value = props.pages
            size.value = props.pageNum
            console.log(size.value,'size');
        }
        // 页码
        function handleCurrentChange(e) {
            page.value = e
            emit("pageBack", page.value, size.value)
        }
        // 条数
        function handleSizeChange(e) {
            size.value = e
            emit("pageBack", page.value, size.value)
        }
        onMounted(() => {
            reload()
        })
        return {
            page,
            size,
            total,
            disabled,
            background,
            handleCurrentChange,
            handleSizeChange,
            reload,//初始化组件
        }
    }
}
</script>

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