vue3+TS完整无bug分页存档

该文章展示了如何在Vue应用中使用el-pagination组件进行分页操作。通过监听sizeChange和currentChange事件来改变页面大小和当前页数,并更新数据列表。state对象用于存储分页状态,FindOrderList函数似乎是负责获取数据的。
摘要由CSDN通过智能技术生成
                    <el-pagination
                        class="u-margin-top-15"
                        layout="total, sizes, prev, pager, next, jumper"
                        total={state.total}
                        current-page={state.list_form.page}
                        onSizeChange={(val) => handleSizeChange(val)}
                        onCurrentChange={(val) => handleCurrentChange(val)}
                        page-sizes={[10, 20, 30, 40, 50, 100]}
                        page-size={state.list_form.pageSize}
                    />
    const handleSizeChange = (val: any) => {
        console.log('每页' + val + ' 条')
        state.list_form.pageSize = val
        state.orderList = []
        FindOrderList()
    }
    const handleCurrentChange = (val: any) => {
        console.log('当前页: ' + val)
        isLoading()
        state.list_form.page = val
        state.orderList = []
        FindOrderList()
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值