vue中elementui使用分页插件Pagination分页问题

在使用分页插件时好像遇到两个问题
跳转到最后一页之后删除最后一页所有的，会造成分页处于不正常状态
使用了条件查询好像会造成跳转第二页会出点问题

先看插件的各个参数方便理解：

¶ Attributes

参数	说明	类型	可选值	默认值
small	是否使用小型分页样式	boolean	—	false
background	是否为分页按钮添加背景色	boolean	—	false
page-size	每页显示条目个数，支持 .sync 修饰符	number	—	10
total	总条目数	number	—	—
page-count	总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性	Number	—	—
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	7
current-page	当前页数，支持 .sync 修饰符	number	—	1
layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	每页显示个数选择器的下拉框类名	string	—	—
prev-text	替代图标显示的上一页文字	string	—	—
next-text	替代图标显示的下一页文字	string	—	—
disabled	是否禁用	boolean	—	false
hide-on-single-page	只有一页时是否隐藏	boolean	—	-

¶ Events

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

在data中定义好三个分页属性,一个数组接收参数,一个查询条件

 data() {
      return {
      //分页
        totalPage: 0,
        pageSize: 10,
        pageIndex: 1,
        //参数
        tableData: [],
        //查询条件
        dataForm: {
          keywords: '',
        }
      };
    }

//监听页数发生改变
 watch:{
      totalPage(){
        if(this.totalPage == (this.pageIndex -1) * this.pageSize && this.totalPage != 0){
          this.pageIndex-= 1;
          this.getDataList();
        }
      }
    },

    methods: {
   
    //pageSize 改变时会触发
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      //currentPage 改变时会触发
      currentChangeHandle(val) {
        this.getDataList(val)
      },
       //调用请求方法
     getDataList(currIndex) {
     //判断属性是否为空，是即第一页
       this.pageIndex = currIndex ? currIndex : 1;
        this.$http({
          url: this.$http.adornUrl('/product/getListAll'),
          method: 'get',
          params: this.$http.adornParams({
            'pageNum': this.pageIndex,
            'pageSize': this.pageSize,
            'keywords': this.dataForm.keywords
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
          //总条数
            this.totalPage = data.data.total
            //数据
            this.tableData = data.data.list;
          }
        })
      }
}

配置分页插件

<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
    :page-sizes="[5, 10, 15, 30, 50]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
</el-pagination>

查询form
其中 **@keyup.enter.native="getDataList()"**可以在输入框输完之后直接回车将会直接搜索而不许要点击查询按钮

<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
  <el-form-item>
    <el-input clearable size="small" placeholder="查询" v-model="dataForm.keywords" clearable suffix-icon="el-icon-edit"
      @click="getDataList()">
    </el-input>
    <el-button size="small" icon="el-icon-search"  @click="getDataList()">查询</el-button>     
  </el-form-item>
</el-form>

这样就可以了 上面的两个bug就解决了，如果发现其他bug或有其他更优解决方案，望指正
(^_−)☆