Element Pagination 分页请求两次接口BUG解决--测试可用！！！

叁歲伎倆 2021-07-24 21:20 2370阅读 0赞

## 前言:element Ui 分页size-change事件触发同时也出发了current-change事件 ##

--------------------

**bug：当选择最后至一页切换条数就会请求两次接口**

--------------------

**1：选择最后一页（第2页）**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70_pic_center]

--------------------

**2：切换条数会请求两次接口**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70_pic_center 1]

--------------------

**解决方法：定义变量state默认为true;条数改变的时候@current-change事件则不请求接口，这样的话只请求了@size-change事件的接口请求、**

<el-pagination center background :pager-count="5" layout="prev, pager, next, sizes" :page-sizes="[10,20,50]" :page-size="pagesize" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange">
    </el-pagination>

data(){ 
    	return{ 
    		dataObj: { 
              token: this.$store.getters.token,
              index: 1,
              length: 10
            },
            total:0,
            currpage: 1,
            pagesize: 10,
            total:0,//条数的总数
    		state:true,
    	}
    }

methods:{ 
    	getData() { 
    		接口请求....
    		api().then(res=>{ 
    			请求成功...
    			this.state=true;
    			this.total = res.max;	//条数的总数
    		})
    	},
    	handleCurrentChange(cpage) {   //页数
            // console.log(cpage)
            this.currpage = cpage;
            this.dataObj.index = cpage;
            if(this.state==true){ 
              this.getData()
            }
          },
          handleSizeChange(psize) {    //条数
            // console.log(psize)
            this.state=false;
            this.pagesize = psize;
            this.dataObj.length = psize
            if(this.state==false){ 
              this.getData()
            }
          },
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/e16acbe7e30d4f97897a8a2e5e0ce890.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/27c4ef15754f413b907f982121ee2cd4.png