后端返回10万条数据

1.分片加载

使用requestAnimationFrame每一帧加载若干条数据

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  </head>
  <body>
    <div id="app">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="日期" width="180"></el-table-column>
      </el-table>
    </div>
  </body>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          visible: false,
          tableData: [],
        };
      },
      methods: {
        // 把10万条数据分片，装进一个二维数组里
        averageFn(arr) {
          let i = 0;
          let result = [];
          const sections = 100; // 分成500片
          while (i < arr.length) {
            result.push(arr.slice(i, i + sections));
            i = i + sections;
          }
          return result;
        },
        async getData() {
          const res = await axios.get("http://127.0.0.1/user");
          let twoDArr = this.averageFn(res.data);
          // 逐渐把二维数组的数据渲染在dom中
          const use2DArrItem = (page) => {
            if (page > twoDArr.length - 1) {
              return;
            }
            requestAnimationFrame(() => {
              this.tableData = this.tableData.concat(twoDArr[page]);
              console.log(this.tableData.length)
              page = page + 1;
              use2DArrItem(page);
            });
          };
          use2DArrItem(0);
        },
      },
      mounted() {
        this.getData();
      },
    });
  </script>
</html>

2.虚拟表格

用户不可能一下看完十万条数据，监听scroll事件，每次将要触底时，加载一些数据

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
		<style></style>
	</head>
	<body>
		<div id="app">
			<div class="box">
				<el-table :data="data1" height="500">
					<el-table-column prop="id" label="序号" width="180"> </el-table-column>
					<el-table-column prop="name" label="序号" width="180"> </el-table-column>
				</el-table>
			</div>
		</div>
	</body>
	<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: function () {
				return {
					dataSource: new Array(500000)
						.fill()
						.map((item, index) => ({ id: index + 1, name: `第${index + 1}个` })),
					data1: [],
					index: 20,
				}
			},
			mounted() {
				const body = document.querySelector('.el-table__body-wrapper')
				this.data1 = this.data1.concat(this.dataSource.slice(0, 20))
				body.addEventListener('scroll', () => {
					console.log(body.scrollHeight - body.scrollTop)
					if (body.scrollHeight - body.scrollTop < 500) {
						this.data1 = this.data1.concat(this.dataSource.slice(this.index, this.index + 20))
						this.index += 20
					}
				})
			},
			methods: {},
		})
	</script>
</html>

后端返回10万条数据 ​

1.分片加载 ​

2.虚拟表格 ​

后端返回10万条数据

1.分片加载

2.虚拟表格