El front-end del proyecto vue hace paginación (el back-end devuelve todos los datos a la vez, y el front-end se pagina solo)

En algunos escenarios del proyecto, el front-end manejará la paginación por sí mismo, y el método de implementación también es muy simple. Solo necesitamos usar un método de división. Los siguientes son los pasos específicos de implementación:

• El primero es implementar un componente de paginación, que no se describirá en detalle aquí, los amigos que necesitan saber cómo implementar un componente de paginación primero lean el siguiente tutorial
• El front-end encapsula componentes de paginación basados ​​en elementui
• Después de introducir el componente de paginación en la página correspondiente según el tutorial anterior, comenzamos a dividir y paginar los datos solicitados.

• data () {
      return {
        //暂存数据
        firstData:[],  
        //表格绑定的数据
        tableData:[],
      }
    },
    methods: {
      async gettableData(){
        const res=await api.gettableData()   //发送请求
        this.firstData=res   //将请求的结果赋给中间变量
        this.tableData=this.firstData.slice(0,10)   //假设一页展示10条数据，将首页数据分隔出来
      },
      fatherPage (e) {      //前面封装的组件调用的方法
        this.pageData.page = e
        this.currentPageChangeHandler(this.pageData.page)
      },
      currentPageChangeHandler (page) {   //点击页码或者下一页时对相应的数据进行切割
        this.tableData = this.firstData.slice((page - 1) * 10, page * 10)
      },
  }