我想既能获取当前页码,又可以实现条件分页查询,搞了很久都不知道怎么弄
想既能获取当前页码,又可以实现条件分页查询,这不是很简单嘛,主要是当前页数和一页显示多少条,总数这些都是同后端传过来的值,并不是前端写死的,关于条件上的分页查询,你只要添加几个查询条件即可,分页条件模糊查询都是从后端来的,前端只要有展示界面和参数传递即可呀,下面我写的实例代码里的条件都是不唯一的,但是点击条件查询后,分页数,总数都会发生改变,总数就是条件后的查询,分页也是附带了条件后的分页,至于查询的结果和方法完全由后端来实现
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
:page-size.sync="pageSize"
:current-page.sync="currentPage"
:page-sizes="[5,10,15]"
layout="total,sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:page-count="5"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
pagesize:5,
currentPage: 1,
total: 0,
};
},
methods:{
// 分页相关
//跳转或当前页改变
handleCurrentChange(current) {
this.selectByPage(current, this.pageSize,条件.....);
},
//下拉框页数改变
handleSizeChange(val) {
this.selectByPage(this.currentPage, val,条件.....);
},
selectByPage(pageNo,pageSize,条件.....){}
},
created:{
this.selectByPage(1,5)
}
}
</script>
这并不冲突吧。
vue只是一个框架。
对于基于vue的ui框架有 element,有antd
他们都有对应的table组件,且都有对应的分页和你所说的获取当前页码的功能。
你可以把不同的功能写成一个个方法函数,然后在一个事件中调用多个方法函数