vue3+element-plus implements pagination function

What I share with you today is for usevue3+element-plusImplement the paging function, just upload the code without saying much

Here is the HTML part:

<el-pagination
    v-model:currentPage=""
    :page-size="formJsonIn.page_size"
    :page-sizes="[10, 20, 30, 40, 50]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    :current-page=""
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
/>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

AI writing code

Here is the definition parameter part:

const formJsonIn = ref({
    page: 1,
    page_size: 10
})

• 1
• 2
• 3
• 4

AI writing code

Here is the function part:

// Choose how many items per page
const handleSizeChange = row => {
    formJsonIn.value.page_size = row
    formJsonIn.value.page = 1
    getlist()
}

// Click on the page to jump
const handleCurrentChange = row => {
    formJsonIn.value.page = row
    getlist()
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

AI writing code