虚拟化表格使用-vue

请出主角vxetable https://vxetable.cn/#/table/start/install

1. 在海量数据的情况下，使用普通表格基本会卡死。
2. vxetable的最佳实践

注意

1. vxetable有两种写法，vxe-table、vxe-grid
2. vxe-table 适合非动态列的表格
3. vxe-grid 适合动态数据列
4. 划重点：请直接使用 vxe-grid，vxe-table超过300列就变乌龟🐢了，性能太差。

<template>
  <div>
    <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from "vue";
const gridOptions = reactive({
  columns: [
    {
      field: "name",
      title: "Name",
      sortable: true,
    },

    {
      field: "age",
      title: "Age",
      sortable: true,
    },
  ],
  data: [
    {
      name: "fuxing",
      age: 0,
      age2: 0,
    },
    {
      name: "fuxing",
      age: 99,
      age2: 99,
    },
    {
      name: "fuxing",
      age: 99,
      age2: 10,
    },
  ],
});
</script>