Vue+Element实现分页（前台分页/后台分页）

一、如果后台写了相关接口方法，那我们就可以配合后台进行分页，分页请求数据，避免第一次请求数据时间过长。

• （1）首先使用element-ui中的分页组件,效果如下图所示
  image.png
  其中total是数据的总条数，current-page是当前的页数,current-change则是当页码改变时触发的方法，其中@和：的区别我的简书也记录的有，大家感兴趣可以看看

 <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
     :page-size="pageSize"
      @current-change="CurrentChange"
    >
    </el-pagination>

• （2）首先在data当中定义三个属性，分别用来存储后台获取的数据、当前页数和数据长度，然后在生命周期里面触发获取所有数据的方法，并传一个page为1，也就是获得第一页的8个数据。

 data() {
      return {
        AllUser: [],
        page:0,
        total:0,
 pageSize: 10,
      }

 mounted() {
      this.getAllUser(1)
    }

 getAllUser(page) {
        this.http.get('user/findAll', {page, rows: 8}).then(res => {
          this.AllUser= res.data.data
          this.page = page
          this.total = res.data.total
        })
      },

• （3）在改变页数的方法中，也就是上文说的current-change方法再次调用getAllUser函数，其中的currentPage是组件自带属性传过来的选择的页数，然后把页数赋值给data中的page，然后再将page传给获取数据的方法，那么就能获取第二页的8条数据了

 CurrentChange(currentPage){
        this.page = currentPage;
        this.getAllUser(this.page) //点击第几页
      },

二、如果后台没有写分页接口方法，那么我们也可以自己前台进行分页处理，让用户界面上看起来会更舒服

• （1）首先还是一样，引入element-ui中的分页组件，其中多了个page-size属性，这个属性时定义每页的数据长度，total直接使用数据的长度

 <el-pagination
      background
      layout="prev, pager, next"
      :total="Class.length"
      :current-page="currentPage"
      :page-size="pagesize"
      @current-change="CurrentChange"
    >
    </el-pagination>

• （2）在data当中定义每页的数据和初始页，其中关键是computed计算属性，使用slice切割数组方法来截取每一页的数据

data() {
      return {
        Class: [],
        pagesize: 8,    //    每页的数据　　
        currentPage: 1, //初始页
      }
    },
   computed: {
      AfterChangeData() {
        let start = (this.currentPage - 1) * this.pagesize;
        let end = this.currentPage * this.pagesize;
        return this.Class.slice(start, end)
      }
    },
methods: {
      getClass() {
        this.http.get('classify1/findClassify1').then(res => {
          this.Class = res.data
        })
      },

      CurrentChange(currentPage) {
        this.currentPage = currentPage;
      },
    },

    mounted() {
      this.getClass()
    }