表格数据分批加载

前情引入 

最近帖主在写一个新模块，这个模块总共有12个表格，分为5个接口来获取数据，由于一开始没有做这种根据导航显示对应表格的样式。所以一开始都将全部表格暴力显示在一页中，需要一下子请求全部数据。所以数据加载非常慢。

 模块如图所示：

其中做的优化就是：

1、后台获取数据不再包括今天，从前一天截至，这样请求数据就不是动态的，就可以对数据进行压缩，接口传递变快了。

2、根据当前选中的导航项，请求对应的接口

现在详细描述这个实现过程

实现过程

1、定义变量activeMenuIndex = ref(0)

2、切换导航，改变activeMenuIndex值

3、在获取数据的时候将activeMenuIndex作为参数传递

js部分

/*'@/utils/axios/api/port'文件*/
// 报告-在线人数
export const reportOnLineUser = (params) => {
  return request({
    url: '/report/onLineUserStatistic',
    method: 'get',
    params
  })
}

/*vue文件*/
//api请求接口
import {
  reportOnLineUser,
  reportVisit,
  reportInterface,
} from '@/utils/axios/api/port'

activeMenuIndex = ref(0),

onMounted(() => {
//初始默认调用第一张表格数据
  changeTab(0)
})

//更改tab
const changeTab = (idx: number) => {
  activeMenuIndex.value = idx
  getData(idx)
}

//async  await 异步获取信息
const getData = async (idx: number) => {
  const table = dataList[0].tableList[idx]

  try {
    switch (idx) {
      case 0:
        table.list = (await reportOnLineUser(params.value)).data
        break
      case 1:
        table.list = (await reportVisit(params.value)).data
        break
      case 2:
      case 3:
      case 4:
        table.list = (
          await reportInterface({
            ...params.value,
            ...paramInterface,
            sortField: table.sortable
          })
        ).data
        break
      default:
        console.log('错误的数据，超出表范围0-11')
        return
    }
  } catch (error) {
    console.error('获取数据时出错', error)
  }
}

html部分

  <!-- 导航 -->
    <div class="tabMenu">
      <span
        class="tabMenuItem"
        :class="{ activeMenuItem: activeMenuIndex == idx }"
        v-for="(table, idx) in dataList[0].tableList"
        :key="table.tableName"
        style="margin-right: 40px"
        @click="changeTab(idx)"
        >{{ table.tableName }}
      </span>
    </div>

//tableList下某一个表格的数据项
      {
        tableName: '在线人数',
        list: [],
        titleName: [], //表行标题
        width: '35%',
        label: ['日均在线人数', '最高在线人数', '日最小在线人数', '最高小时在线人数'],
        prop: ['dayAvg', 'dayMax', 'dayMin', 'hourMax']
      },

总结

这样就可以实现根据导航分批次请求接口，加载页面数据了，如果页面添加一些筛选项的话，就在筛选项发生变化之后，再次调用请求数据的方法就可以了，这样每次都只会请求一张表的数据，就能非常快了