在使用vue Pagination时,由于有搜索功能,那么可能导致page搜索没有重置。出现bug
<Pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="search" />
data(){
return{
list: [],
listLoading: true,
total: 0,
listQuery: {
page: 1,
limit: 50
},
}
}
search(){
var url = this.HOST + "/xx/xx?page="+this.listQuery.page+"&rows="+this.listQuery.limit
var qs = require('qs');
this.$axios.post(url, qs.stringify(this.info), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then((response) => {
let res = response.data
if (res.needReLogin === 1) {
this.$store.dispatch('LogOut').then(() => {
location.reload()
})
}
this.listLoading = false;
this.list=res.rows
this.total = res.total;
})
},
解决办法:设置对于搜索的监控数值变化,演示变化就将page重置为1
<el-card class="box-card" style="margin-bottom: 20px">
<el-form ref="dataForm" :model="info" label-position="right" label-width="20px" style="width: 100%; margin-left:0px; height: 30px">
<el-row>
<el-form-item label="">
<el-input style="width: 30%" v-model="info.userId" @change="doWatch" placeholder="请输入用户id"/>
<el-button style="width: 100px" type="primary" @click="search()">
搜索
</el-button>
</el-form-item>
</el-row>
</el-form>
</el-card>
doWatch(){
this.listQuery.page=1
}
另一种方法
watch: {
info: {
handler() {
this.listQuery.page=1
},
immediate: true,
deep:true
}
},