vue中elementui使⽤分页插件Pagination分页问题
在使⽤分页插件时好像遇到两个问题
跳转到最后⼀页之后删除最后⼀页所有的，会造成分页处于不正常状态
使⽤了条件查询好像会造成跳转第⼆页会出点问题
先看插件的各个参数⽅便理解：
Attributes
参数说明类型可选值默认值small是否使⽤⼩型分页样式boolean—false background是否为分页按钮添加背景⾊boolean—false page-size每页显⽰条⽬个数，⽀持 .sync 修饰符number—10 total总条⽬数number——
page-count 总页数，total 和 page-count 设置任意⼀个就可以达到显⽰页码的功
能；如果要⽀持 page-sizes 的更改，则需要使⽤ total 属性
Number——
pager-count 页码按钮的数量，当总页数超过该值时会折叠number分页查询插件
⼤于等于 5 且⼩于等于 21
的奇数
7
current-
page
当前页数，⽀持 .sync 修饰符number—1
layout组件布局，⼦组件名⽤逗号分隔String
sizes, prev, pager,
next, jumper, ->, total,
slot
'prev, pager,
next, jumper, ->,
total'
page-sizes每页显⽰个数选择器的选项设置number[]—[10, 20, 30, 40, 50, 100]
popper-
class
每页显⽰个数选择器的下拉框类名string——prev-text替代图标显⽰的上⼀页⽂字string——next-text替代图标显⽰的下⼀页⽂字string——disabled是否禁⽤boolean—false hide-on-
single-page
只有⼀页时是否隐藏boolean—-Events
事件名称说明回调参数
size-change pageSize 改变时会触发每页条数current-change currentPage 改变时会触发当前页prev-click⽤户点击上⼀页按钮改变当前页后触发当前页
next-click⽤户点击下⼀页按钮改变当前页后触发当前页在data中定义好三个分页属性,⼀个数组接收参数,⼀个查询条件
data(){
return{
//分页
totalPage:0,
pageSize:10,
pageIndex:1,
//参数
tableData:[],
//查询条件
dataForm:{
keywords:'',
}
};
}
//监听页数发⽣改变
watch:{
totalPage(){
alPage ==(this.pageIndex -1)*this.pageSize &&alPage !=0){ this.pageIndex-=1;
}
}
},
methods:{
//pageSize 改变时会触发
sizeChangeHandle(val){
this.pageSize = val
this.pageIndex =1
},
//currentPage 改变时会触发
currentChangeHandle(val){
},
//调⽤请求⽅法
getDataList(currIndex){
//判断属性是否为空，是即第⼀页
this.pageIndex = currIndex ? currIndex :1;
this.$http({
url:this.$http.adornUrl('/product/getListAll'),
method:'get',
params:this.$http.adornParams({
'pageNum':this.pageIndex,
'pageSize':this.pageSize,
'keywords':this.dataForm.keywords
})
}).then(({
data
})=>{
if(data && de ===0){
//总条数
//数据
this.tableData = data.data.list;
}
})
}
}
配置分页插件
<el-pagination @size-change="sizeChangeHandle"@current-change="currentChangeHandle":current-page="pageIndex" :page-sizes="[5, 10, 15, 30, 50]":page-size="pageSize":total="totalPage"layout="total, sizes, prev, pager, next, jumper"> </el-pagination>
查询form
其中 **@native="getDataList()"**可以在输⼊框输完之后直接回车将会直接搜索⽽不许要点击查询按钮
<el-form :inline="true":model="dataForm"@native="getDataList()">
<el-form-item>
<el-input clearable size="small"placeholder="查询"v-model="dataForm.keywords"clearable suffix-icon="el-icon-edit"
@click="getDataList()">
</el-input>
<el-button size="small"icon="el-icon-search"@click="getDataList()">查询</el-button>
</el-form-item>
</el-form>
这样就可以了 上⾯的两个bug就解决了，如果发现其他bug或有其他更优解决⽅案，望指正
(^_−)☆

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。