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

* feat: 添加虚拟表格示例

src/views/table/base/list.tsx

@@ -22,7 +22,7 @@ import NestProp from "./nestProp.vue";
 import ImgPreview from "./imgPreview.vue";
 
 const rendContent = (val: string) =>
-  `代码位置：src/views/pure-table/base/${val}.vue`;
+  `代码位置：src/views/table/base/${val}.vue`;
 
 export const list = [
   {

src/views/table/edit/list.tsx

@@ -3,7 +3,7 @@ import Demo2 from "./demo2/index.vue";
 import Demo3 from "./demo3/index.vue";
 
 const rendContent = (val: string) =>
-  `代码位置：src/views/pure-table/edit/${val}/index.vue`;
+  `代码位置：src/views/table/edit/${val}/index.vue`;
 
 export const list = [
   {

src/views/table/high/list.tsx

@@ -10,7 +10,7 @@ import Echarts from "./echarts/index.vue";
 import TableSelect from "./table-select/index.vue";
 
 const rendContent = (val: string) =>
-  `代码位置：src/views/pure-table/high/${val}/index.vue`;
+  `代码位置：src/views/table/high/${val}/index.vue`;
 
 export const list = [
   {

src/views/table/virtual.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./virtual/list";
+
+defineOptions({
+  name: "VxeTable"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          虚拟滚动采用
+          <el-link
+            href="https://vxetable.cn/#/table/scroll/scroll"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vxe-table
+          </el-link>
+        </span>
+      </div>
+    </template>
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>

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>

src/views/vue-flow/layouting/index.vue

@@ -117,8 +117,6 @@ async function layoutGraph(direction) {
 </template>
 
 <style scoped>
-
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);