使用分頁問題：點選第二頁然後查詢，資料顯示為第一頁的問題解決
阿新 • • 發佈：2020-12-22
技術標籤：vuejavascripthtmlcssvue.js
使用分頁問題：點選第二頁然後查詢，資料顯示為第一頁的問題解決
關於分頁，這是在工作中接觸vue+element由於邏輯混亂導致的，前幾天在改系統BUG沒來的及整理，今日開始動手整理，因為跨頁面較多，可能會有遺漏，後續發現問題會繼續補充。
具體問題是，分頁後資料共兩頁，點選第二頁檢視第二頁資訊正常，但是如果停留在第二頁上去執行查詢操作，重新整理回來的資料會在第二頁顯示，經過修改這個問題被解決，但是又出現了新的問題是，查詢返回的資料不足一頁時，頁面顯示為第一頁，但第二頁仍存在。
程式碼結構如下：
<!--index.vue中html部分--> *: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)
// }
// })
},
到這基本上就解決了，這是一片小白工作踩坑記錄，其中有一部分是有朋友指點過的，如果文章中哪些地方有問題，歡迎大家指點，希望可以多多交些朋友，撒花~