使用分页问题：点击第二页然后查询，数据显示为第一页的问题解决

本文主要是介绍使用分页问题：点击第二页然后查询，数据显示为第一页的问题解决，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用分页问题：点击第二页然后查询，数据显示为第一页的问题解决

关于分页，这是在工作中接触vue+element由于逻辑混乱导致的，前几天在改系统BUG没来的及整理，今日开始动手整理，因为跨页面较多，可能会有遗漏，后续发现问题会继续补充。

具体问题是，分页后数据共两页，点击第二页查看第二页信息正常，但是如果停留在第二页上去执行查询操作，刷新回来的数据会在第二页显示，经过修改这个问题被解决，但是又出现了新的问题是，查询返回的数据不足一页时，页面显示为第一页，但第二页仍存在。
代码结构如下：

<!--index.vue中html部分-->
<el-popoverplacement="bottom-start"width="800"trigger="click"v-model="isShow"><!--这里的ref用来指向RecordsSearch这个子组件--><RecordsSearch ref="searchChild" :searchList="searchInfo"  :searchPage="pagination" @sendPersonTable='getPersonTable' /><el-button type="primary" icon="el-icon-search" slot="reference" >查询详细数据</el-button>
</el-popover>
<el-paginationclass="pagin"backgroundlayout="prev, pager, next":page-size="10":current-page.sync="curPage":total="total"@current-change="changePage">
</el-pagination>

*:current-page.sync=“curPage”*使用了element组件中的方法，如下：

继续贴代码：

//index.vue中js代码
data() {return {curPage: 1}},methods:{ initPersonRecords(){//初始化要显示的表格this.tableLoading = truethis.$get('/api/querypagefile?pagination=' + JSON.stringify(this.pagination)+'&flag='+this.flag).then(res=>{if(res.code == '0'){if(this.formWhere == 'familyProblem'){this.personRecords = res.data.data.filter(res=>res.familyFileId != this.familyId)}else{this.personRecords = res.data.data}this.total = res.data.totalthis.tableLoading = false}else{this.tableLoading = false}})},changePage(page){this.pagination.page = pagethis.$refs.searchChild.submitBtn(this.pagination)//更新pagination，调用子组件里的方法，目的是为了切换页面时刷新数据},getPersonTable(data,total,num){//用来接收子组件穿回来的参数this.curPage = num //赋值给curPagethis.personRecords = data            this.total = total},     },

查询页面*（RecordsSearch.vue）代码如下:

<!--html-->
<div class="submit_btn"><el-button type="primary" @click="submit">提交</el-button>                            </div>

//js
methods: {submit(){let pagenation = {rows:10,page:1,sidx:"",sord:'ASC',records:0,total:0}this.submitBtn(pagenation)//提交调用函数，将页面page重置为1请求接口},submitBtn(params){//父组件中调用此函数this.$get('/api/querypagefile?pagination='+JSON.stringify(params)+'&query_json='+ JSON.stringify(this.form)+'&flag='+this.flag).then(res=>{//这里 params 是一个形参，是提交查询条件和更改页面刷新时的pagination的值if(res.code == '0'){let newData = []if(this.formWhere == 'familyProblem'){newData = res.data.data.filter(res=>res.familyFileId != this.familyId)}else{newData = res.data.data}this.$emit('sendPersonTable',newData,res.data.total,params.page)//这里将当前页数传回父组件，赋值给curPage，切换页数时将page赋值给pagination，再作为参数调用此函数}else{}})}}

到这里这个模块的分页已经可以正常使用，但在其他模块不生效，还存在查询后的数据不足一页，但页数2仍然存在的BUG，于是，又有如下写法：

<el-popoverplacement="top-start"width="830"v-model="isShow"trigger="click"><EncapsulatedSearche :key="new Date().getTime()" ref='encapChild' :serchEncap="pagination" @form="childForm" @sendSeal="getSeal"/><!-- @form="childForm"  接收子组件传回的表单数据 --><el-button type="primary" icon="el-icon-search" slot="reference" >查询</el-button>
</el-popover>
<el-paginationclass="pagin"backgroundlayout="prev, pager, next":current-page.sync="curPage":page-size="10":total="total"@current-change="changePage">
</el-pagination>

js代码如下：

data() {return {curPage: 1,form:{Name:"",IDNumber:"",SealStatus:"",SealStartDate:"",SealEndDate:"",EndReasonCode:"",EndStartDate:"",EndEndDate:""}}},methods:{// 拿到子组件传递过来的form  childForm(form){this.form = formthis.pagination.page = 1this.curPage = 1   //当前页置为1this.initSeal()this.isShow = false  //这是第一篇文章里提到的参数，这里不重要},initSeal(){this.tableLoading = truethis.$get('/api/querypagefile?query_json='+JSON.stringify(this.form)+'&pagination='+JSON.stringify(this.pagination)).then(res => {if(res.code == '0'){this.sealTabal = res.data.datathis.total = res.data.totalthis.tableLoading = false}else{this.tableLoading = false}})},changePage(page){this.pagination.page = page// this.$refs.encapChild.getSealTabal(this.pagination)this.initSeal()  //改为调用初始化时使用的函数},}

子组件中的代码如下：

<div class="submitBtn"><el-button type="primary" @click="getSealTabal">提交</el-button>                            
</div>

        getSealTabal(params){this.$emit('form',this.form)//修改后，这个方法只将表单绑定的form传回父组件// this.$get('/api/querypagefile?query_json='+JSON.stringify(this.form)+'&pagination='+JSON.stringify(params)).then(res=>{//     if(res.code == '0'){//         this.$emit('sendSeal',res.data.data, false, params.page)//         console.log(params.page)//         //console.log(res.data)//     }// })},