js 后端数据一次性返回,前端自己写分页逻辑

需求: 后端调取的核心的接口,核心那边原本没有分页,要加上比较复杂,让前端来写分页,问了上生产一次性接口返回的数据不会超两百,虽然从性能上来说,不推荐到前端页面写分页

<template>
   <Page  size='small' style='margin-top: 10px; text-align: right' :current='pageCost.pageNum'  :page-size='pageCost.pageSize'  :total='pageCost.total' show-total   @on-change='changeCost'> </Page>
</template>
<script>
   export default ({
       data () {
          return {
	          totalCostList: [],
	          totalCostData: [],
              pageCost: { 
                 total: 0,
                 pageNum: 1,
                 pageSize: 10
              }
           }
        },
      created () {
        this.tatalCostQuery()
       },
     //方法
      methods: {
          async tatalCostQuery (pageSize, pageNum) {
                  if ( !pageSize || !pageNum) {  // 页面首次加载
                      this.pageCost.total = 0;
                      this.pageCost.pageNum = 1
                  }
                  this.totalCostList = [];
                  this.totalCostData = [];
                  let params = {}
                  let url = Api.POST_QUERY
                  await http.post(url, params).then(res => {
                        if (res.retCode == '0000') {
                            // 分页逻辑
                            this.totalCostList = res.data.data
                            this.totalCostData =  this.totalCostList.slice(
                              (this.pageCost.pageNum - 1)*this.pageCost.pageSize, 
                              this.pageCost.pageNum* this.pageCost.pageSize
                            )
                            
                            this.pageCost.total = res.data.total    // 页面展示的总分页
                        }
                  })
          },
          
	// 分页方法
	changeCost (page) {
		 this.pageCost.pageNum = page
		 this.tatalCostQuery(  this.pageCost.pageSize, this.pageCost.pageNum)
         }
      }
 })
</script>