使用vxe-table表格虚拟滚动

做一个table，想要渲染上千万条数据，一般表格会导致浏览器卡顿或崩溃，这时我们可以使用插件解决。
但是在安装vxe-table的时候，运行不起来，一直报错，后来才发现是版本的问题。
安装的时候参照官网全局安装的写法会出现错误，不知道你们会不会

npm install xe-utils@3 vxe-table@next

还有注意这里版本要切换成最新的

后面找了很多方法，改成这种方式下载包：

npm install xe-utils vxe-table@next

这样就可以运行了。。

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/style.css";

function useTable(app) {
  app.use(VXETable);
}

createApp(App).use(useTable).mount("#app");

// app.vue
<template>
  <vxe-table
    border
    show-overflow
    highlight-hover-row
    ref="xTable1"
    height="600"
  >
    <vxe-column type="seq" width="100"></vxe-column>
    <vxe-column field="name" title="Name" sortable></vxe-column>
    <vxe-column field="role" title="Role"></vxe-column>
    <vxe-column field="sex" title="Sex"></vxe-column>
  </vxe-table>
</template>

<script>
import { defineComponent, ref, onMounted, nextTick } from "vue";
import XEUtils from "xe-utils";

export default defineComponent({
  setup() {
    const mockList1 = [];
    for (let index = 0; index < 10000; index++) {
      mockList1.push({
        name: "Test" + index,
        role: "Developer",
        sex: "男",
      });
    }

    const xTable1 = ref({});

    onMounted(() => {
      nextTick(() => {
        const $table = xTable1.value;
        if ($table) {
          $table.loadData(XEUtils.clone(mockList1, true));
        }
      });
    });

    return {
      xTable1,
    };
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

最终界面 我插入的是1w条数据