我想问一下vue+element-ui带条件查询分页问题

遇到一个分页问题,需要带条件查询,望指教!

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </div>
     handleCurrentChange (val) {
        this.pageNum = val
        // this.loadData()
      },
      handleSizeChange (val) {
        this.pageSize = val
        // this.loadData()
      },

这是分页代码,上面定义了个加载数据的事件,但是我需要通过条件查询数据的时候,怎么把事件加到里面呢?下面是一个事件shi'li

  queryByTag (formName) {
    let self = this
    this.queryForm['pageSize'] = this.pageSize
    this.queryForm['pageNum'] = this.pageNum
    self.$refs[formName].validate((valid) => {
      if (valid) {
        let url = Config.context + '/friendManager/getFriendInfoByTags'
        if (url) {
          axios({
            method: 'POST',
            url: url,
            data: {
              pageSize: this.queryForm['pageSize'],
              pageNum: this.queryForm['pageNum'],
              tags: self.queryForm2.id
            },
            timeout: Config.timeout
          })
            .then((response) => {
              self.loading = false
              let data = response.data
              self.page = data.page || 0
              self.count = data.count || 0
              self.tableData = data.list || []
            })
              .catch((error) => {
                self.$message.error('error')
                throw error
              })
        }
      } else {
        return false
      }
    })
  },

1个回答

可以使用post请求,将pageSize和pageNo固定写在url中,将查询条件放在data中
图片说明

我直接给你加在这里吧
图片说明图片说明

分页这里的方法实现
图片说明图片说明

CSDN1642816671
发光的树 回复水越帆: 加你了
7 个月之前 回复
qq_41618510
水越帆 回复极速蜗牛: 江湖救急a!方便加个微信吗shuiyuefan3014
7 个月之前 回复
qq_41618510
水越帆 回复极速蜗牛: 就是我的页面里有个根据标签查找好友,有个根据用户查找好友,还有一个就是页面加载全部好友,这三个都涉及分页,注册三个不同的是怎么操作!好像就是要这样!!
7 个月之前 回复
CSDN1642816671
发光的树 回复水越帆: 没弄太明白你的意思,你是说你一个页面有三个分页查询吗?那样的话你可以注册三个不同的handleCurrentPage时间,分别对应你的三个分页查询
7 个月之前 回复
qq_41618510
水越帆 回复极速蜗牛: 你好我的问题就是出在显示这里,因为我是有三个不同的查询要分页的,但是在handleCurrentChange那里不会写。。导致它点下一页的时候会触发第一个事件(就是不按条件来查)如果是多个事件知道怎么处理吗,而且有参数
7 个月之前 回复
qq_41618510
水越帆 回复极速蜗牛: 除了事件那里还有啥要改吗请问
7 个月之前 回复
qq_41618510
水越帆 回复极速蜗牛: 你好,我后台已经实现了分页的,就是前台显示有问题,我按照你那样不行,不能分页,只显示第一页数据
7 个月之前 回复
CSDN1642816671
发光的树 不会在这里加图片,我直接加载在原答案里了
7 个月之前 回复
qq_41618510
水越帆 你好,请问怎么把查询条件放在data里2呢,望赐教!!
7 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问