feat: 添加虚拟表格示例 (#1007)

* feat: 添加虚拟表格示例

src/views/table/virtual/list.tsx

@@ -0,0 +1,20 @@
+import List from "./list.vue";
+import TreeList from "./treeList.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/table/virtual/${val}.vue`;
+
+export const list = [
+  {
+    key: "list",
+    content: rendContent("list"),
+    title: "虚拟列表",
+    component: List
+  },
+  {
+    key: "treeList",
+    content: rendContent("treeList"),
+    title: "虚拟树",
+    component: TreeList
+  }
+];

src/views/table/virtual/list.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const tableData = ref([]);
+
+setTimeout(() => {
+  // 模拟数据
+  const mockList = [];
+  for (let index = 0; index < 500; index++) {
+    mockList.push({
+      id: index,
+      name: "Test" + index,
+      role: "Developer",
+      sex: "男"
+    });
+  }
+  tableData.value = mockList;
+}, 100);
+</script>
+
+<template>
+  <vxe-table
+    border
+    show-overflow
+    height="500"
+    :row-config="{ isHover: true }"
+    :data="tableData"
+    :scroll-y="{ enabled: true }"
+  >
+    <vxe-column type="seq" title="序号" width="100" />
+    <vxe-column field="name" title="名称" sortable />
+    <vxe-column field="role" title="角色" />
+    <vxe-column field="sex" title="性别" />
+  </vxe-table>
+</template>

src/views/table/virtual/treeList.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import treeList from "./tree.json";
+
+const tableRef = ref();
+
+const loading = ref(false);
+const tableData = ref([]);
+
+const loadList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    tableData.value = treeList;
+    loading.value = false;
+  }, 200);
+};
+
+const expandAllEvent = () => {
+  const $table = tableRef.value;
+  if ($table) {
+    $table.setAllTreeExpand(true);
+  }
+};
+
+const claseExpandEvent = () => {
+  const $table = tableRef.value;
+  if ($table) {
+    $table.clearTreeExpand();
+  }
+};
+
+loadList();
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      <el-button @click="expandAllEvent">展开所有</el-button>
+      <el-button @click="claseExpandEvent">收起所有</el-button>
+    </div>
+
+    <vxe-table
+      ref="tableRef"
+      show-overflow
+      height="500"
+      :loading="loading"
+      :tree-config="{ transform: true }"
+      :scroll-y="{ enabled: true, gt: 20 }"
+      :data="tableData"
+    >
+      <vxe-column type="seq" title="序号" width="200" tree-node />
+      <vxe-column field="id" title="Id" />
+      <vxe-column field="name" title="地点" />
+    </vxe-table>
+  </div>
+</template>