问题:如图所示,当我搜索数据过多,显示多页等情况下去点击第二页、第三页等,这时页面会跳转到原来页面的第二页
需求:搜索后点击第二页显示的应该是搜索后数据而不是原来页面的第二页
<!-- 顶部搜索区域 -->
<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('查询失败!')
}
}
},
这是搜索过后的效果图