记vue使⽤ElementUI分页出现的问题
最近在整理之前项⽬代码时，⽆意间发现了⼏个隐藏的bug，这bug藏得真深啊~~~
先上代码：
<template>
<div>
<el-row class="page_title">
<el-col :span="24">
<span>操作⽇志</span>
<hr>
</el-col>
</el-row>
<el-row>
<el-col :span="20" >
<span id="span_sty">⽇志类型：</span><dictionary lectkey="apiType" @lectfun="lectVal"/>
<span id="span_sty">⽤户名：</span><el-input @input="tValueNull" placeholder="请输⼊内容" v-model="query.urname" clea <span id="span_sty">开始时间：</span>
<el-date-picker v-model="query.beginTime" value-format='yyyy-MM-dd HH:mm' @change='tValueNull' type="datetime" placeholder="选择⽇期时间"> <span id="span_sty">结束时间：</span>
<el-date-picker v-model="dTime" value-format='yyyy-MM-dd HH:mm' @change='tValueNull' type="datetime" placeholder="选择⽇期时间"></ </el-col>
<el-col :span="4" >
<el-button type="warning" @click="delItem(0)" class="button_sty">删除</el-button>
</el-col>
</el-row>
<el-table
:data="tableListData"
stripe
border
highlight-current-row
@lection-change="handleSelectionChange"
>
<el-table-column
type="lection"
align="center"
width="55">
</el-table-column>
<el-table-column
label="序号"
type="index"
align="center"
width="100">
<template scope="scope">
<span v-text="getIndex(scope.$index)"></span>
</template>
</el-table-column>
<el-table-column
prop="logTypeString"
align="center"
label="类型">
</el-table-column>
<el-table-column
prop="urname"
align="center"
label="⽤户名">
</el-table-column>
<el-table-column
prop="description"
align="center"
拉肚子吃什么食物
label="操作内容">
</el-table-column>
<el-table-column
prop="createTime"
align="center"
中秋诗词
label="操作时间">
</el-table-column>
</el-table>
<div class="page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[12, 48, 100]"
layout="total,sizes, prev, pager, next,jumper"
:total="currentTotal" > </el-pagination>
</div>
</div>
</template>
<script>
import dictionary from '../dictionary.vue'
export default {
name: 'operationLog',
data(){
return {
query:{
查济古镇门票urname:'',
logType:'',忐忑不定
beginTime:'',
endTime:'',
必须的意思size:12,
page:0
},
currentTotal:0,
tableListData:[],
}
},
created(){
},
components: {
dictionary
},
methods:{
handleSizeChange(val) {
this.query.size = val;
this.query.page = 0;
},
handleCurrentChange(val) {
this.query.page = val-1
忍者图片
},
getIndex($index) {
//表格序号
return (this.query.page) * this.query.size + $index + 1
},
tValueNull(){
this.ListData)//防抖函数，已封装公共⽅法 },
lectVal(val){//选择框回调⽅法
this.query.logType=val
},
getListData(){
this.post(this.url+'/log/find',this.query)
.then(res=>{
if(sult && res.data.msg =='success'){
this.tableListData = res.t
this.currentTotal = parInt(res.alElements);
}el{
this.$(res.data.msg)
}
}).catch(() => {
});
}
}
}
</script>
<style>
</style>
⾸先第⼀个问题就是当我点击分页后（不是在第⼀页时），再来筛选数据，会发现⽆论数据是否存在，后端接⼝都会返回⼀个空数组。。。这是为什么呢当我看到我传给后台的参数时，我傻了，原来问题出现在参数上。
当我点击分页按钮时，会触发current-change事件，参数page也会随之⽽改变，此时筛选时，page已经不为0，所以才会出现返回空数组的情况。
知道问题原因就很好解决了，找到筛选函数，把参数page设为0即可
当我以为问题也会随之解决时，bug总会出其不意的出现，搞得你措⼿不及。参数page设为0，可以解决上述问题，但如果返回的数据过多时，就会出现另⼀个问题，上图⽚
青春黑板报
我是在第⼆页筛选，然后就会出现上述问题，明明是第⼀页，为何下⾯显⽰的是第⼆页呢这真是⼀波
接着⼀波的惊喜啊，没办法，只能想办法解决了（⼩问题啦(●'◡'●)）解决的⽅法和上⾯的⼀样，给他个初始值就OK了，打开element⽂档，叮咚，找到了
就是它了，定义变量，在筛选时把currentPage赋值为1即可。
扬州著名景点
嗯~~~就这么多了，之前测试时都是⼀两条数据，也没注意到这个隐藏的问题，整理出来，分享给⼤家，以免重复我的错误。能⼒有限，有错误的地⽅欢迎指出。
