在使用分页插件时好像遇到两个问题
跳转到最后一页之后删除最后一页所有的,会造成分页处于不正常状态
使用了条件查询好像会造成跳转第二页会出点问题
先看插件的各个参数方便理解:
¶ 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(){
if(this.totalPage == (this.pageIndex -1) * this.pageSize && this.totalPage != 0){
this.pageIndex-= 1;
this.getDataList();
}
}
},
methods: {
//pageSize 改变时会触发
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
//currentPage 改变时会触发
currentChangeHandle(val) {
this.getDataList(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 && data.code === 0) {
//总条数
this.totalPage = data.data.total
//数据
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
其中 **@keyup.enter.native="getDataList()"
**可以在输入框输完之后直接回车将会直接搜索而不许要点击查询按钮
<el-form :inline="true" :model="dataForm" @keyup.enter.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或有其他更优解决方案,望指正
(^_−)☆