8 种方案机智应对后端一次性返回 10万 条数据

route.get("/bigData", (req, res) => {

  res.header('Access-Control-Allow-Origin', '*'); // 允许跨域

  let arr = [] // 定义数组，存放十万条数据

  for (let i = 0; i < 100000; i++) { // 循环添加十万条数据

    arr.push({

      id: i + 1,

      name: '名字' + (i + 1),

      value: i + 1,

    })

  }

  res.send({ code: 0, msg: '成功', data: arr }) // 将十万条数据返回之

})

<el-button :loading="loading" @click="plan">点击请求加载</el-button>

<el-table :data="arr">

  <el-table-column type="index" label="序" />

  <el-table-column prop="id" label="ID" />

  <el-table-column prop="name" label="名字" />

  <el-table-column prop="value" label="对应值" />

</el-table>

data() {

    return {

      arr: [],

      loading: false,

    };

},

async plan() {

    // 发请求，拿数据，赋值给 arr

}

async plan() {

      this.loading = true;

      const res = await axios.get("http://ashuai.work:10000/bigData");

      this.arr = res.data.data;

      this.loading = false;

}

function averageFn(arr) {

  let i = 0; // 1. 从第 0 个开始截取

  let result = []; // 2. 定义结果，结果是二维数组

  while (i < arr.length) { // 6. 当索引等于或者大于总长度时，即截取完毕

    // 3. 从原始数组的第一项开始遍历

    result.push(arr.slice(i, i + 10)); // 4. 在原有十万条数据上，一次截取 10 个用于分堆

    i = i + 10; // 5. 这 10 条数据截取完，再截取下十条数据，以此类推

  }

  return result; // 7. 最后把结果丢出去即可

}

async plan() {

      this.loading = true;

      const res = await axios.get("http://ashuai.work:10000/bigData");

      this.loading = false;

      let twoDArr = averageFn(res.data.data);

      for (let i = 0; i < twoDArr.length; i++) {

        // 相当于在很短的时间内创建许多个定时任务去处理

        setTimeout(() => {

          this.arr = [...this.arr, ...twoDArr[i]]; // 赋值渲染

        }, 1000 * i); // 17 * i // 注意设定的时间间隔... 17 = 1000 / 60

      }

    },

async plan() {

  this.loading = true;

  const res = await axios.get("http://ashuai.work:10000/bigData");

  this.loading = false;

  // 1. 将大数据量分堆

  let twoDArr = averageFn(res.data.data);

  // 2. 定义一个函数，专门用来做赋值渲染（使用二维数组中的每一项）

  const use2DArrItem = (page) => {

    // 4. 从第一项，取到最后一项

    if (page > twoDArr.length - 1) {

      console.log("每一项都获取完了");

      return;

    }

    // 5. 使用请求动画帧的方式

    requestAnimationFrame(() => {

      // 6. 取出一项，就拼接一项（concat 也行）

      this.arr = [...this.arr, ...twoDArr[page]];

      // 7. 这一项搞定，继续下一项

      page = page + 1;

      // 8. 直至完毕（递归调用，注意结束条件）

      use2DArrItem(page);

    });

  };

  // 3. 从二维数组中的第一项，第一堆开始获取并渲染（数组的第一项即索引为 0）

  use2DArrItem(0); 

},

getShowTableData() { 

    // 获取截取开始索引 

    let begin = (this.pageIndex - 1) * this.pageSize; 

    // 获取截取结束索引

     let end = this.pageIndex * this.pageSize; 

    // 通过索引去截取，从而展示

    this.showTableData = this.allTableData.slice(begin, end); 

}

// 使用无限滚动插件

import elTableInfiniteScroll from 'el-table-infinite-scroll';

Vue.use(elTableInfiniteScroll);

<el-table

  v-el-table-infinite-scroll="load"

  :data="tableData"

>

  <el-table-column prop="id" label="ID"></el-table-column>

  <el-table-column prop="name" label="名字"></el-table-column>

</el-table>

async load() {

    // 触底加载，展示数据...

},

<template>

  <div class="box">

    <el-table

      v-el-table-infinite-scroll="load"

      height="600"

      :data="tableData"

      border

      style="width: 80%"

      v-loading="loading"

      element-loading-text="数据量太大啦，客官稍后..."

      element-loading-spinner="el-icon-loading"

      element-loading-background="rgba(255, 255, 255, 0.5)"

      :header-cell-style="{

        height: '24px',

        lineHeight: '24px',

        color: '#606266',

        background: '#F5F5F5',

        fontWeight: 'bold',

      }"

    >

      <el-table-column type="index" label="序"></el-table-column>

      <el-table-column prop="id" label="ID"></el-table-column>

      <el-table-column prop="name" label="名字"></el-table-column>

      <el-table-column prop="value" label="对应值"></el-table-column>

    </el-table>

  </div>

</template>

<script>

// 分堆函数

function averageFn(arr) {

  let i = 0;

  let result = [];

  while (i < arr.length) {

    result.push(arr.slice(i, i + 10)); // 一次截取 10 个用于分堆

    i = i + 10; // 这 10 个截取完，再准备截取下 10 个

  }

  return result;

}

import axios from "axios";

export default {

  data() {

    return {

      allTableData: [], // 初始发请求获取所有的数据

      tableData: [], // 要展示的数据

      loading: false

    };

  },

  // 第一步，发请求，获取大量数据，并转成二维数组，分堆分组分块存储

  async created() {

    this.loading = true;

    const res = await axios.get("http://ashuai.work:10000/bigData");

    this.allTableData = averageFn(res.data.data); // 使用分堆函数，存放二维数组

    //this.originalAllTableData = this.allTableData// 也可以存一份原始值，留作备用，都行的

    this.loading = false;

    // 第二步，操作完毕以后，执行触底加载方法

    this.load(); 

  },

  methods: {

    // 初始会执行一次，当然也可以配置，使其不执行

    async load() {

      console.log("自动多次执行之，首次执行会根据高度去计算要执行几次合适");

      // 第五步，触底加载相当于把二维数组的每一项取出来用，取完用完时 return 停止即可

      if (this.allTableData.length == 0) {

        console.log("没数据啦");

        return;

      }

      // 第三步，加载的时候，把二维数组的第一项取出来，拼接到要展示的表格数据中去

      let arr = this.allTableData[0];

      this.tableData = this.tableData.concat(arr);

      // 第四步，拼接展示以后，再把二维数组的第一项的数据删除即可

      this.allTableData.shift();

    },

  },

};

</script>

<template>

  <!-- 虚拟列表容器，类似“窗口”，窗口的高度取决于一次展示几条数据

            比如窗口只能看到10条数据，一条40像素，10条400像素

            故，窗口的高度为400像素，注意要开定位和滚动条 -->

  <div

    class="virtualListWrap"

    ref="virtualListWrap"

    @scroll="handleScroll"

    :style="{ height: itemHeight * count + 'px' }"

  >

    <!-- 占位dom元素，其高度为所有的数据的总高度 -->

    <div

      class="placeholderDom"

      :style="{ height: allListData.length * itemHeight + 'px' }"

    ></div>

    <!-- 内容区，展示10条数据，注意其定位的top值是变化的 -->

    <div class="contentList" :style="{ top: topVal }">

      <!-- 每一条（项）数据 -->

      <div

        v-for="(item, index) in showListData"

        :key="index"

        class="itemClass"

        :style="{ height: itemHeight + 'px' }"

      >

        <!--swig0-->

      </div>

    </div>

    <!-- 加载中部分 -->

    <div class="loadingBox" v-show="loading">

      <i class="el-icon-loading"></i>

      &nbsp;&nbsp;<span>loading...</span>

    </div>

  </div>

</template>

<script>

import axios from "axios";

export default {

  data() {

    return {

      allListData: [], // 所有的数据，比如这个数组存放了十万条数据

      itemHeight: 40, // 每一条（项）的高度，比如 40 像素

      count: 10, // 一屏展示几条数据

      start: 0, // 开始位置的索引

      end: 10, // 结束位置的索引

      topVal: 0, // 父元素滚动条滚动，更改子元素对应 top 定位的值，确保联动

      loading: false,

    };

  },

  computed: {

    // 从所有的数据 allListData 中截取需要展示的数据 showListData

    showListData: function () {

      return this.allListData.slice(this.start, this.end);

    },

  },

  async created() {

    this.loading = true;

    const res = await axios.get("http://ashuai.work:10000/bigData");

    this.allListData = res.data.data;

    this.loading = false;

  },

  methods: {

    // 滚动这里可以加上节流，减少触发频次

    handleScroll() {

      /**

       * 获取在垂直方向上，滚动条滚动了多少像素距离 Element.scrollTop

       *

       * 滚动的距离除以每一项的高度，即为滚动到了多少项，当然，要取个整数

       * 例：滚动 4 米，一步长 0.8 米，滚动到第几步，4/0.8 = 第 5 步（取整好计算）

       *

       * 又因为我们一次要展示 10 项，所以知道了起始位置项，再加上结束位置项，

       * 就能得出区间了【起始位置，起始位置 + size 项数】==【起始位置，结束位置】

       * */

      const scrollTop = this.$refs.virtualListWrap.scrollTop;

      this.start = Math.floor(scrollTop / this.itemHeight);

      this.end = this.start + this.count;

      /**

       * 动态更改定位的 top 值，确保联动，动态展示相应内容

       * */

      this.topVal = this.$refs.virtualListWrap.scrollTop + "px";

    },

  },

};

</script>

<style scoped lang="less">

// 虚拟列表容器盒子

.virtualListWrap {

  box-sizing: border-box;

  width: 240px;

  border: solid 1px #000000;

  // 开启滚动条

  overflow-y: auto;

  // 开启相对定位

  position: relative;

  .contentList {

    width: 100%;

    height: auto;

    // 搭配使用绝对定位

    position: absolute;

    top: 0;

    left: 0;

    .itemClass {

      box-sizing: border-box;

      width: 100%;

      height: 40px;

      line-height: 40px;

      text-align: center;

    }

    // 奇偶行改一个颜色

    .itemClass:nth-child(even) {

      background: #c7edcc;

    }

    .itemClass:nth-child(odd) {

      background: pink;

    }

  }

  .loadingBox {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(255, 255, 255, 0.64);

    color: green;

    display: flex;

    justify-content: center;

    align-items: center;

  }

}

</style>

// 使用 VXETable

import VXETable from 'vxe-table'

import 'vxe-table/lib/style.css'

Vue.use(VXETable)

<template>

  <div class="box">

    <vxe-table

      border

      show-overflow

      ref="xTable1"

      height="300"

      :row-config="{ isHover: true }"

      :loading="loading"

    >

      <vxe-column type="seq"></vxe-column>

      <vxe-column field="id" title="ID"></vxe-column>

      <vxe-column field="name" title="名字"></vxe-column>

      <vxe-column field="value" title="对应值"></vxe-column>

    </vxe-table>

  </div>

</template>

<script>

import axios from "axios";

export default {

  data() {

    return {

      loading: false,

    };

  },

  async created() {

    this.loading = true;

    const res = await axios.get("http://ashuai.work:10000/bigData");

    this.loading = false;

    this.render(res.data.data);

  },

  methods: {

    render(data) {

      this.$nextTick(() => {

        const $table = this.$refs.xTable1;

        $table.loadData(data);

      });

    },

  },

};

</script>