vue 프로젝트의 프런트 엔드는 페이징을 수행합니다(백엔드는 한 번에 모든 데이터를 반환하고 프런트 엔드는 자체적으로 페이지를 매깁니다).

프로젝트의 일부 시나리오에서는 프런트 엔드가 자체적으로 페이징을 처리하고 구현 방법도 매우 간단하여 슬라이스 방법만 사용하면 됩니다. 구체적인 구현 단계는 다음과 같습니다.

• 첫 번째는 페이징 구성 요소를 구현하는 것으로 여기에서는 자세히 설명하지 않습니다.페이징 구성 요소를 구현하는 방법을 알아야 하는 친구는 먼저 다음 자습서를 읽으십시오.
• 프런트 엔드는 elementui를 기반으로 페이징 구성 요소를 캡슐화합니다.
• 위의 튜토리얼에 따라 해당 페이지에 페이징 구성 요소를 도입한 후 요청된 데이터를 분할하고 페이지를 매기기 시작합니다.

• 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)
      },
  }