vue3+element-plus实现分页功能

今天给大家分享的是用vue3+element-plus实现分页功能，话不多说直接上代码

这里是HTML部分：

<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写代码

这里是定义参数部分：

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

• 1
• 2
• 3
• 4

AI写代码

这里是功能部分：

// 选择每页多少条
const handleSizeChange = row => {
    formJsonIn.value.page_size = row
    formJsonIn.value.page = 1
    getlist()
}

// 点击页面进行跳转
const handleCurrentChange = row => {
    formJsonIn.value.page = row
    getlist()
}

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

AI写代码