vue elementUI el-pagination 分页器的使用细节

el-pagination 基本属性介绍

      当前第几页、数据总条数、每一页展示条数、连续页码数

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      current-page:代表的是当前第几页

      total：代表分页器一共需要展示数据条数

      page-size：代表的是每一页需要展示多少条数据

      page-sizes：代表可以设置每一页展示多少条数据

      layout：可以实现分页器布局

      pager-count:按钮的数量  如果 9  连续页码是7

代码示例

<el-pagination
      style="margin-top: 20px; text-align: center"
      :current-page="page"
      :total="total"
      :page-size="limit"
      :pager-count="7"
      :page-sizes="[3, 5, 10]"
      @current-change="getPageList"
      @size-change="handleSizeChange"
      layout="prev, pager, next, jumper,->,sizes,total"
    >
</el-pagination>

@current-change、@size-change的使用

data(){
    return {
      //代表的分页器第几页
      page: 1,
      //当前页数展示数据条数
      limit: 3,
      //总共数据条数
      total: 0,
    }
}
methods:{
     //获取品牌列表的数据,默认查询第一页
    async getPageList(pager = 1) {
      this.page = pager;
      //解构出参数
      const { page, limit } = this;
      //获取品牌列表的接口
      //当你向服务器发请求的时候，这个函数需要带参数，因此老师在data当中初始化两个字段，代表给服务器传递参数
      let result = await this.$API.trademark.reqTradeMarkList(page, limit);
      if (result.code == 200) {
        //分别是展示数据总条数与列表展示的数据
        this.total = result.data.total;
        this.list = result.data.records;
      }
    },
    //当分页器某一页需要展示数据条数发生变化的时候会触发
    handleSizeChange(limit) {
      //整理参数
      this.limit = limit;
      this.getPageList();
    },
}