新的一天又开始了，中午和妈妈打了一会视频，聊了一下未来的方向。还是挺憧憬毕业后的生活的，希望能早点实现财务自由。亲人的鼓励是我们最大的动力。

再插点题外话，封城半个多月，超市终于上酒了，晚上放松一下。今天就提前下班了。

今天项目打包部署上去了，没有增加新的功能，等老师看过之后再做更改吧。今天跟着视频学了一下后台管理系统的学习

大概就是这个样子，用了一下别人的模板，感觉自己和大佬的差距还是非常大的。由于视频老师讲的比较细致，今天之看了一下登陆功能的实现，退出登录的实现以及分页功能的实现

分页

笔记

当前第一页、数据总条数、每一页展示的条数、连续页码数
current-page:代表当前第几页
total: 代表分页器一共需要展示数据条数
page-size: 代表的是每一页需要展示多少条数据
page-sizes:代表可以设置每一页展示多少条数据
layout: 可以实现分页器布局
pager-count:按钮的数量 如果 9 连续页码是7

代码部分

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

调取数据部分

    // 获取列表数据方法
    this.getPageList()
  },
  methods: {
    // 获取品牌列表的数据
    async getPageList(pager = 1) {
      this.page = pager
      // 解构出参数
      const { page, limit } = this
      // 获取品牌列表的接口
      var result = await this.$API.tradeMark.reqTradeMarkList(page, limit)
      console.log(result)
      if (result.code === 200) {
        this.total = result.data.total
        this.list = result.data.records
      }
    },
    // 当分页器某一页需要展示数据条数发生变化的时候会触发
    handleSizeChange(limit) {
      // 整理参数
      this.limit = limit
      this.getPageList()
    }
  }

遇到点小插曲，由于调用接口的人太多，无法登陆进去了，就给大家展示到这了。加油兄弟们。

第五天前端浅记录

分页