分页组件的事件用得最多的就是当前页码切换事件(current-change)和每页显示条数变更事件(size-change)。current-change事件传入当前页码,可以根据当前页码向后台获取当前页码的数据。size-change事件传入的参数是当前每页显示的条数,可以根据当前每页显示的条数向后台获取当前页码的数据。实现代码如下: <el-pagination v-...
console.log("sizechange", val); get_users(val, userList.pnum); }; const handleCurrentChange = (val) => { console.log("currentchange", val); get_users(userList.psize, val); };
分页组件中的各部分及其顺序是由layout指定的,如果页码/分页记录数变化会触发@size-change/@current-change事件的回调函数执行 import{ ref }from'vue'constcurrentPage =ref(4)constpageSize =ref(100)constsmall =ref(false)constbackground =ref(false)constdisabled =ref(false)consttotal =ref(400)consthandleS...
@size-change:pageSize 改变时会触发,回调参数:每页条数(pageSize) @current-change:currentPage 改变时会触发,回调参数:当前页(currentPage) current-page:当前页(currentPage) page-sizes:每页条数(pageSize)组成的一个数组 page-size:每页条数(pageSize) layout:组件布局,子组件名用逗号分隔 total:总条目数 h...
') } import { ref } from 'vue' import type { ComponentSize } from 'element-plus' const currentPage4 = ref(1) const pageSize4 = ref(5) const size = ref<ComponentSize>('default') const background = ref(false) const disabled = ref(false) const handleSizeChange = (val: number) =...
@size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle1"></el-pagination> 1. 2. 3. 4. 5. 6. 7. 8. 这个是用来实现分页功能的组件 :current-page="page1"这个是表明当前页 :page-sizes="[10, 20, 50, 100]"这个是来显示一页中页数 ...
<el-paginationclass='mt-4'background:current-page='currentPage':page-sizes='[10, 20, 50, 100]':page-size='pageSize'layout='total, sizes, prev, pager, next, jumper':total='total'@size-change='handleSizeChange'@current-change='handleCurrentChange'/> ...
app.mount('#app') 在需要用到的页面或者组件里面写入 <el-pagination v-model:currentPage="currentPage":page-sizes="[10, 30, 50, 100]"layout=" prev, pager, next, jumper,total, sizes,":total="400"@size-change="handleSizeChange"@current-change="handleCurrentChange"/> ...
<template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageListObj.pageNumber" :page-sizes="pageListObj.pageSizeArr" :page-size="pageListObj.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageListObj.total"> </...
<el-pagination background layout="prev, pager, next, sizes, jumper, total" @size-change="getTableData" @current-change="getTableData" v-model:currentPage="pageParams.current" v-model:pageSize="pageParams.size" :total="100" > </el-pagination> i found that 'v-model:pageSize' didn't ...