使用分页问题：点击第二页然后查询，数据显示为第一页的问题解决 |
您所在的位置：网站首页 › ehview搜索只有一页 › 使用分页问题：点击第二页然后查询，数据显示为第一页的问题解决 |
使用分页问题：点击第二页然后查询，数据显示为第一页的问题解决
|
使用分页问题：点击第二页然后查询，数据显示为第一页的问题解决
关于分页，这是在工作中接触vue+element由于逻辑混乱导致的，前几天在改系统BUG没来的及整理，今日开始动手整理，因为跨页面较多，可能会有遗漏，后续发现问题会继续补充。 具体问题是，分页后数据共两页，点击第二页查看第二页信息正常，但是如果停留在第二页上去执行查询操作，刷新回来的数据会在第二页显示，经过修改这个问题被解决，但是又出现了新的问题是，查询返回的数据不足一页时，页面显示为第一页，但第二页仍存在。 代码结构如下： 查询详细数据*: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）代码如下: 提交 //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，于是，又有如下写法： 查询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() //改为调用初始化时使用的函数 }, }子组件中的代码如下： 提交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) // } // }) },到这基本上就解决了，这是一片小白工作踩坑记录，其中有一部分是有朋友指点过的，如果文章中哪些地方有问题，欢迎大家指点，希望可以多多交些朋友，撒花~ |
【本文地址】
今日新闻 |
推荐新闻 |