From 6c0c542a8c07993e5022bb64359deede9087fad5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BF=E7=94=9F=E7=8B=AE=E5=AD=90?= <tangnad@qq.com>
Date: Mon, 18 Dec 2023 18:58:26 +0800
Subject: [PATCH] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |   2 +
 play/src/vxe-table.vue            | 105 ++++++++++++++++++++++++++++--
 play/src/vxe-table/hooks/index.ts |  21 ++++++
 play/src/vxe-table/index.vue      |  98 ++++++++++++++++++++++++----
 pnpm-lock.yaml                    |  23 +++++--
 5 files changed, 223 insertions(+), 26 deletions(-)
 create mode 100644 play/src/vxe-table/hooks/index.ts

diff --git a/package.json b/package.json
index cb701db..b2deb0a 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
 		"vue-demi": "^0.14.6"
 	},
 	"devDependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
 		"@commitlint/cli": "^17.8.1",
 		"@commitlint/config-conventional": "^17.8.1",
 		"@types/node": "^17.0.45",
@@ -48,6 +49,7 @@
 		"less": "^4.2.0",
 		"lint-staged": "^13.3.0",
 		"mitt": "^3.0.1",
+		"nativebird": "^1.2.11",
 		"overlayscrollbars": "^2.4.4",
 		"overlayscrollbars-vue": "^0.5.6",
 		"postcss": "^8.4.31",
diff --git a/play/src/vxe-table.vue b/play/src/vxe-table.vue
index 797d5b4..2849d58 100644
--- a/play/src/vxe-table.vue
+++ b/play/src/vxe-table.vue
@@ -4,10 +4,12 @@
       <h4>## VXETable with Virtual Scrollbars {{ isHover ? ' - Hovered' : '' }}</h4>
       <el-checkbox v-model="states.isVirtualScroll">表格虚拟滚动</el-checkbox>
       <el-checkbox v-model="states.isVirtualScrollbar">表格虚拟滚动条</el-checkbox>
+      <el-button type="primary" @click="measure">测试滚动性能</el-button>
       <el-button type="primary" @click="refresh">刷新</el-button>
       <el-button type="primary" @click="addMore">+{{ listCount }}条数据</el-button>
     </div>
     <vxe-table-virtual-scrollbar
+      v-model:tableRef="vxeTableRef"
       border
       stripe
       :enable="states.isVirtualScrollbar"
@@ -17,32 +19,107 @@
       :row-config="{isHover: true}"
       :checkbox-config="{labelField: 'id', highlight: true}"
       :data="states.tableData"
-      :scroll-x="{ enabled: states.isVirtualScroll }"
-      :scroll-y="{ enabled: states.isVirtualScroll }"
+      :scroll-x="{ enabled: states.isVirtualScroll, oSize: 0 }"
+      :scroll-y="{ enabled: states.isVirtualScroll, oSize: 0 }"
       >
       <vxe-column type="seq" :width="180" fixed="left" tree-node></vxe-column>
       <vxe-column type="checkbox" title="ID" :width="140"></vxe-column>
       <vxe-column field="name" title="Name" :width="140"></vxe-column>
       <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
-      <vxe-column field="age" title="Age" :width="120"></vxe-column>
       <vxe-column field="address" title="Address" show-overflow :min-width="300"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
+      <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
+      <vxe-column field="age" title="Age" :width="120"></vxe-column>
       <vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
       <vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
       <vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
-      <vxe-column type="seq" :width="60" fixed="right"></vxe-column>
+      <vxe-column width="500" fixed="right">
+        <el-button size="small" type="text">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+        <el-button size="small" type="text">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+        <el-button size="small" type="text">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+        <el-button size="small" type="text">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+        <el-button size="small" type="text">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+        <el-button size="small" type="text">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+        <el-button size="small" type="text">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+        <el-button size="small" type="text">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+        <el-button size="small" type="text">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+        <el-button size="small" type="text">
+          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+      </vxe-column>
     </vxe-table-virtual-scrollbar>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, watch, onMounted } from "vue";
+import { ElButton, ElIcon } from "element-plus"
+import { Upload } from "@element-plus/icons-vue"
 import { useElementHover } from "@/hooks";
 import VxeTableVirtualScrollbar from "./vxe-table/index.vue";
+import NativeBird from "nativebird";
 
 const playRef = ref();
 const isHover = useElementHover(playRef);
 
- const states = reactive({
+const vxeTableRef = ref();
+const states = reactive({
   isVirtualScroll: true,
   isVirtualScrollbar: true,
   isLoading: false,
@@ -66,7 +143,7 @@ const formatterSex = ({ cellValue }: any) => {
 
 let count = 0
 let parentId = 0
-const listCount = 300
+const listCount = 2000
 const getTableData = () => {
   const res = Array(listCount).fill(0).map((x) => {
     const res = {
@@ -92,7 +169,7 @@ const getTableData = () => {
 const refresh = async () => {
   states.isLoading = true
   states.tableData = []
-  setTimeout(() => {
+  setTimeout(async () => {
     states.tableData = getTableData()
     states.isLoading = false
   }, 300)
@@ -109,4 +186,18 @@ const addMore = async () => {
 onMounted(refresh)
 watch(() => states.isVirtualScroll, refresh)
 watch(() => states.isVirtualScrollbar, refresh)
+
+const measure = (async () => {
+  if (!vxeTableRef.value) {
+    throw new Error('[ERR] no vxeTableRef')
+  }
+  const startTime = performance.now()
+
+  await NativeBird.mapSeries(Array.from({ length: 5 }), async (_, idx) => {
+    await vxeTableRef.value.scrollTo(0, idx * 30)
+  })
+
+  const endTime = performance.now()
+  console.log('[info] total time', endTime - startTime)
+})
 </script>
diff --git a/play/src/vxe-table/hooks/index.ts b/play/src/vxe-table/hooks/index.ts
new file mode 100644
index 0000000..10602bd
--- /dev/null
+++ b/play/src/vxe-table/hooks/index.ts
@@ -0,0 +1,21 @@
+/**
+ * 将 promise 转化为延迟调用，以便控制其流程
+ */
+export function useDefer<T = unknown>() {
+  let resolve: (value: T | PromiseLike<T>) => void;
+  let reject: (reason?: any) => void;
+
+  const promise = new Promise<T>((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+
+  const states = Object.freeze({
+    promise,
+    then: promise.then.bind(promise),
+    resolve: resolve!,
+    reject: reject!,
+  });
+
+  return states;
+}
diff --git a/play/src/vxe-table/index.vue b/play/src/vxe-table/index.vue
index 4994905..0d02e22 100644
--- a/play/src/vxe-table/index.vue
+++ b/play/src/vxe-table/index.vue
@@ -6,7 +6,7 @@
       barStates.isScrolling.y ? 'is-scrolling-y' : '',
       (!barStates.isScrolling.x && !barStates.isScrolling.y) ? 'is-no-scrolling' : '',
     ]"
-    ref="tableRef"
+    ref="vxeTableRef"
     height="100%"
     v-bind="$attrs"
   >
@@ -15,30 +15,96 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots, nextTick, ref, watch } from "vue";
-import { until } from "@vueuse/core";
+import { watchEffect, useAttrs, useSlots, nextTick, ref, watch } from "vue";
+import { until, eagerComputed, useVModel } from "@vueuse/core";
 import { useScrollbar } from "@/hooks";
-
-const props = defineProps<{
-  enable: boolean
-}>();
+import { useDefer } from "./hooks";
 
 const slots = useSlots();
 if (!slots.default) {
   throw new Error("[ERR] no default slot");
 }
 
-const tableRef = ref<any | null>(null);
+const attrs = useAttrs()
+const emits = defineEmits(["update:tableRef"]);
+const props = defineProps<{
+  enable: boolean
+  tableRef: any
+}>();
+
+const vxeTableRef = useVModel(props, "tableRef", emits);
+const leftFixedWidth = ref(0);
+const rightFixedWidth = ref(0);
+watchEffect(async () => {
+  if (!vxeTableRef.value) {
+    return;
+  }
+  if (!attrs.columns) {
+    return;
+  }
+  await nextTick();
+  try {
+    const deferLeft = useDefer<HTMLElement>();
+    const tickLeft = setInterval(() => {
+      try {
+        const leftFixed = vxeTableRef.value.$el.querySelector(".vxe-table--fixed-left-wrapper");
+        if (leftFixed) {
+          deferLeft.resolve(leftFixed);
+          clearInterval(tickLeft);
+        }
+      } catch (err) {
+        clearInterval(tickLeft);
+        deferLeft.reject();
+      }
+    }, 17 * 5);
+    deferLeft.then((leftFixed: HTMLElement) => {
+      const width = leftFixed.clientWidth;
+      leftFixedWidth.value = width;
+    });
+
+    const deferRight = useDefer<HTMLElement>();
+    const tickRight = setInterval(() => {
+      try {
+        const rightFixed = vxeTableRef.value.$el.querySelector(".vxe-table--fixed-right-wrapper");
+        if (rightFixed) {
+          deferRight.resolve(rightFixed);
+          clearInterval(tickRight);
+        }
+      } catch (err) {
+        clearInterval(tickRight);
+        deferRight.reject();
+      }
+    }, 17 * 5);
+    deferRight.then((rightFixed: HTMLElement) => {
+      const width = rightFixed.clientWidth;
+      rightFixedWidth.value = width;
+    });
+  } catch (err) {
+    leftFixedWidth.value = 0;
+    rightFixedWidth.value = 0;
+    console.log("[ERR]", err);
+  }
+});
+const cssLeftFixedWidth = eagerComputed(() => {
+  console.log("[INFO] leftFixedWidth.value", leftFixedWidth.value);
+  return leftFixedWidth.value + "px";
+});
+const cssRightFixedWidth = eagerComputed(() => {
+  console.log("[INFO] rightFixedWidth.value", rightFixedWidth.value);
+  return rightFixedWidth.value + "px";
+});
+
 const barStates = useScrollbar();
+
 console.log('[info] barStates', barStates)
 
 watch(() => props.enable, async (enable) => {
   console.log('[info] 开启虚拟滚动条', enable)
   if (enable) {
     await nextTick();
-    await until(tableRef.value).toMatch((x) => x?.$el?.parentElement);
+    await until(vxeTableRef.value).toMatch((x) => x?.$el?.parentElement);
     try {
-      const $table = tableRef.value.$el;
+      const $table = vxeTableRef.value.$el;
       const $header = $table.querySelector(".vxe-table--header-wrapper");
       const $bodyWrapper = $table.querySelector(".vxe-table--body-wrapper");
       const $bodyContent = $table.querySelector(".vxe-table--body");
@@ -49,12 +115,12 @@ watch(() => props.enable, async (enable) => {
 
       barStates.setOffset({ y: { top: $header } });
       barStates.init({
-        mount: tableRef,
+        mount: vxeTableRef,
         content: [$bodyContent, $bodyXSpace, $bodyYSpace],
         viewport: [$bodyWrapper]
       });
     } catch (err) {
-      console.error("[ERR] error when init virtual scrollbar", err, tableRef);
+      console.error("[ERR] error when init virtual scrollbar", err, vxeTableRef);
     }
   } else {
     barStates.destroy()
@@ -94,6 +160,14 @@ watch(() => props.enable, async (enable) => {
   --color-1: rgb(0 0 0 / 5%);
   --color-2: rgb(0 0 0 / 3%);
   --color-3: rgb(0 0 0 / 8%);
+  --left-col-width: v-bind(cssLeftFixedWidth);
+  --right-col-width: v-bind(cssRightFixedWidth);
+
+  @table-header-column-height: 50px;
+  @header-with-shadow-height: @table-header-column-height + 50px;
+  .vxe-table--header-wrapper.body--wrapper {
+    clip-path: polygon(var(--left-col-width, 0) 0, calc(100% - var(--right-col-width, 0)) 0%, calc(100% - var(--right-col-width, 0)) @table-header-column-height, 100% @table-header-column-height, 100% calc(100% + @header-with-shadow-height), 0 calc(100% + @header-with-shadow-height), 0 @table-header-column-height, var(--left-col-width) @table-header-column-height);
+  }
 
   .vxe-table--header-wrapper {
     z-index: 9;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f3414a8..7b4f721 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,9 @@ devDependencies:
   '@commitlint/config-conventional':
     specifier: ^17.8.1
     version: 17.8.1
+  '@element-plus/icons-vue':
+    specifier: ^2.3.1
+    version: 2.3.1(vue@3.3.8)
   '@types/node':
     specifier: ^17.0.45
     version: 17.0.45
@@ -73,6 +76,9 @@ devDependencies:
   mitt:
     specifier: ^3.0.1
     version: 3.0.1
+  nativebird:
+    specifier: ^1.2.11
+    version: 1.2.11
   overlayscrollbars:
     specifier: ^2.4.4
     version: 2.4.4
@@ -722,8 +728,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /@element-plus/icons-vue@2.0.10(vue@3.3.8):
-    resolution: {integrity: sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==}
+  /@element-plus/icons-vue@2.3.1(vue@3.3.8):
+    resolution: {integrity: sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
@@ -2157,7 +2163,7 @@ packages:
       vue: ^3.2.0
     dependencies:
       '@ctrl/tinycolor': 3.6.0
-      '@element-plus/icons-vue': 2.0.10(vue@3.3.8)
+      '@element-plus/icons-vue': 2.3.1(vue@3.3.8)
       '@floating-ui/dom': 1.2.1
       '@popperjs/core': /@sxzz/popperjs-es@2.11.7
       '@types/lodash': 4.14.191
@@ -2558,7 +2564,7 @@ packages:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
     dependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jsonfile: 4.0.0
       universalify: 0.1.2
     dev: true
@@ -2660,7 +2666,6 @@ packages:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     requiresBuild: true
     dev: true
-    optional: true
 
   /graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
@@ -2896,7 +2901,7 @@ packages:
   /jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
     optionalDependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
     dev: true
 
   /jsonfile@6.1.0:
@@ -2904,7 +2909,7 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
     dev: true
 
   /jsonparse@1.3.1:
@@ -3250,6 +3255,10 @@ packages:
     resolution: {integrity: sha512-fzN+T2K7/Ah25XU02MJkPZ5q4Tj5FpjmIYq4rvoHX4yb16HzFdCO6JxFFn5Y/oBhQ8no8fUZavnyIv9/+xkBBw==}
     dev: true
 
+  /nativebird@1.2.11:
+    resolution: {integrity: sha512-mZqbma6L/8n1snzCg4WYpg2NLfAavSC09oFzq4b6SRu0KBUFCVHs3ApwHVNSnoEOnMMAUxXhtdhe+uzYs8vH3w==}
+    dev: true
+
   /natural-compare-lite@1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
     dev: true