vue中使用Element-UI组件之分页 el-pagination 组件基本使用方法

先看官方文档说明  再来看此片文章

html页面

<el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageLimit"
        layout="prev, pager, next, jumper"
        :total="dataTotalLength">
</el-pagination>

 

上面的参数说明：

page-size

每页显示条目个数，支持 .sync 修饰符

current-page

当前页数，支持 .sync 修饰符

 

current-change事件说明：

current-change

currentPage 改变时会触发

当前页

然后是js 

export default {

data() {

    return {
      dataTotalLength:5, //数据总量total
      currentPage:1, //页码
      pageLimit:5, //每页的数据量
        }
    };
methods: {

在页面一进来的   getCodeList(page)  这个page  在调用的时候传入一个1 就可以了。
这个方法里面 你只需要关注 
 limit: this.pageLimit, //每页数据量
 offset: page, //页码
这两个参数就是了。

/* 网络请求获取批次号列表 */
    async getCodeList(page, fromSearch) {
      var patrn = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im;
      if (patrn.test(this.searchCode)) {
        this.$message.error('不能搜索特殊字符');
        return false;
      }
       if (fromSearch) page = 1;
      let res = await this.$fetch(
        "/operationUserController/queryRegisterUser",
        {
          limit: this.pageLimit, //每页数据量
          offset: page, //页码
          keyWord: this.searchCode || null
        },
        "POST",
        "user"
      );
      if (res.code == 0) {
        this.codeData = res.data.data;
        this.dataTotalLength = res.data.countSize;
      }
    },
    handleCurrentChange(page){
      this.currentPage = page //点击的时候把拿到的页码 赋值给组件
      this.getCodeList(page)
    },

}

};

然后就结束了。有的时候会忘记这些东西 所以记录下来  以后忘了直接来查看使用就是了。

下一篇文章 我将 封装一下这个组件   其实不封装的也挺好用 代码量也少。