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

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

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

<!--index.vue中html部分-->
<el-popover
  	  placement="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-pagination
      class="pagin"
      background
      layout="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 = true
            this.$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.total
                    this.tableLoading = false
                }else{
                    this.tableLoading = false
                }
            })
        },
        changePage(page){
            this.pagination.page = page
            this.$refs.searchChild.submitBtn(this.pagination)
            //更新pagination，调用子组件里的方法，目的是为了切换页面时刷新数据
        },
        getPersonTable(data,total,num){
        //用来接收子组件穿回来的参数
            this.curPage = num 
            //赋值给curPage
            this.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-popover
        placement="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-pagination
          class="pagin"
          background
          layout="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 = form
            this.pagination.page = 1
            this.curPage = 1   //当前页置为1
            this.initSeal()
            this.isShow = false  //这是第一篇文章里提到的参数，这里不重要
        },
        initSeal(){
        this.tableLoading = true
           this.$get('/api/querypagefile?query_json='+JSON.stringify(this.form)+'&pagination='+JSON.stringify(this.pagination)).then(res => {
                if(res.code == '0'){
                    this.sealTabal = res.data.data
                    this.total = res.data.total
                    this.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>

js

        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)
            //     }
            // })
        },

到这基本上就解决了，这是一片小白工作踩坑记录，其中有一部分是有朋友指点过的，如果文章中哪些地方有问题，欢迎大家指点，希望可以多多交些朋友，撒花~