vue分页器可以绑定多个事件不

img
我想既能获取当前页码,又可以实现条件分页查询,搞了很久都不知道怎么弄

想既能获取当前页码,又可以实现条件分页查询,这不是很简单嘛,主要是当前页数和一页显示多少条,总数这些都是同后端传过来的值,并不是前端写死的,关于条件上的分页查询,你只要添加几个查询条件即可,分页条件模糊查询都是从后端来的,前端只要有展示界面和参数传递即可呀,下面我写的实例代码里的条件都是不唯一的,但是点击条件查询后,分页数,总数都会发生改变,总数就是条件后的查询,分页也是附带了条件后的分页,至于查询的结果和方法完全由后端来实现

<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组件,且都有对应的分页和你所说的获取当前页码的功能。

你可以把不同的功能写成一个个方法函数,然后在一个事件中调用多个方法函数