element-el-pagination 分页-控制每页展示数量（整理）

el-pagination 基本属性介绍

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

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

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

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

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

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

layout：可以实现分页器布局

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

代码示例

<el-pagination :current-page="pageNo" :total="totalPage" :page-size="15" :page-sizes="[10, 15, 20, 30, 40]" layout="prev, pager, next" background @current-change="handleCurrentChange" class="two51" prev-text="上一页" next-text="下一页"></el-pagination>
handleCurrentChange(val) {
	console.log(`当前页a: ${val}`);
	this.$get(this.$host + `/index/Article/articleList?page=${val}`).then((res) => {
		this.shijian = res.data.data;
		this.totalPage = res.data.total; //总条数
		this.pageNo = res.data.current_page; //当前第几页
	});
},

<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:{
     //获取品牌列表的数据,默认查询第一页
    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();
    },
}