五分糖的苦 2021-05-18 16:06 采纳率: 8.3%
浏览 94

老问题 搜索分页时 第一页显示搜索的,第二页显示全部数据

问题:如图所示,当我搜索数据过多,显示多页等情况下去点击第二页、第三页等,这时页面会跳转到原来页面的第二页

需求:搜索后点击第二页显示的应该是搜索后数据而不是原来页面的第二页

<!-- 顶部搜索区域 -->
		<el-form ref="searchForm" :model="searchCLassRoomQueryInfo" :rules="searchFormRules" :inline="true" class="demo-form-inline">
			<el-form-item prop="classroom_name">
				<el-input v-model="searchCLassRoomQueryInfo.classroom_name" placeholder="教室名称" value=""/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="queryScreenSemesterData">查询</el-button>
				<el-button @click="searchClassRoomList">查看全部教室</el-button>
			</el-form-item>
		</el-form>
<!-- 页码切换 -->
			<div class="bottomPaginationaa">
				<el-pagination :current-page.sync="searchCLassRoomQueryInfo.page" :page-sizes="[6, 10, 15]" :page-size="searchCLassRoomQueryInfo.limit"
				 layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
// 处理分页切换
			handleSizeChange(val) {
				this.searchCLassRoomQueryInfo.limit = val
				this.searchClassRoomList()
			},
			handleCurrentChange(val) {
				this.searchCLassRoomQueryInfo.page = val
				this.searchClassRoomList()
			},
// 条件查询
      async queryScreenSemesterData () {
        if (this.searchCLassRoomQueryInfo.classroom_name == '') {
          this.$message.error('请输入要查询的条件并且在页数为第一页才能查询!')
        } else {
          let queryData = {
            classroom_name: this.searchCLassRoomQueryInfo.classroom_name,
            page:this.searchCLassRoomQueryInfo.page,
            limit:this.searchCLassRoomQueryInfo.limit
          }
          if(queryData.classroom_name){
            queryData.page = 1,
            queryData.limit = 10
            // this.searchCLassRoomQueryInfo.page = 1,
            // this.searchCLassRoomQueryInfo.limit = 10
          }
          console.log(queryData)
          let resData = await searchClassRoom(queryData)
          if (resData.code == 200) {
            this.$message.success('查询成功!')
            this.classShowTable = resData.data
            this.total = resData.data.total
            this.searchClassRoomList()
          } else {
            this.$message.error('查询失败!')
          }
        }
      },

这是搜索过后的效果图

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2021-05-18 16:24
    关注

    分页是后端实现吗?

     

    评论

报告相同问题?

悬赏问题

  • ¥15 mmo能不能做客户端怪物
  • ¥15 osm下载到arcgis出错
  • ¥15 Dell g15 每次打开eiq portal后3分钟内自动退出
  • ¥200 使用python编写程序,采用socket方式获取网页实时刷新的数据,能定时print()出来就行。
  • ¥15 matlab如何根据图片中的公式绘制e和v的曲线图
  • ¥15 我想用Python(Django)+Vue搭建一个用户登录界面,但是在运行npm run serve时报错了如何解决?
  • ¥15 QQ邮箱过期怎么恢复?
  • ¥15 登录他人的vue项目显示服务器错误
  • ¥15 (标签-android|关键词-app)
  • ¥15 comsol仿真压阻传感器