chore: add loadmore button in testcase

Lionad-Morotar · Jun 9, 2023 · dac4e2a · dac4e2a
1 parent 7697068
commit dac4e2a
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 27 deletions.
diff --git a/play/src/vxe-table.vue b/play/src/vxe-table.vue
@@ -4,6 +4,8 @@
       <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="refresh">刷新</el-button>
+      <el-button type="primary" @click="addMore">+{{ listCount }}条数据</el-button>
     </div>
     <vxe-table-virtual-scrollbar
       border
@@ -41,8 +43,8 @@ const playRef = ref();
 const isHover = useElementHover(playRef);
 
  const states = reactive({
-  isVirtualScroll: true,
-  isVirtualScrollbar: true,
+  isVirtualScroll: false,
+  isVirtualScrollbar: false,
   isLoading: false,
   tableData: [] as any[],
   sexList: [
@@ -62,29 +64,44 @@ const formatterSex = ({ cellValue }: any) => {
   return item ? item.label : ''
 }
 
+let count = 0
+let parentId = 0
+const listCount = 50
+const getTableData = () => {
+  const res = Array(listCount).fill(0).map((x) => {
+    const res = {
+      id: count++,
+      parentId: null as number | null,
+      name: 'Test-' + (count + 1),
+      role: 'Develop',
+      sex: Math.random() < 0.5 ? '1' : '0',
+      age: 28,
+      address: Array(10).fill('long address long long long address').join(', ')
+    }
+    if (Math.random() < 0.5) {
+      parentId = count
+    }
+    if (Math.random() < 0.5) {
+      res.parentId = parentId
+    }
+    return res
+  })
+  return res
+}
+
 const refresh = async () => {
+  states.isLoading = true
+  states.tableData = []
+  setTimeout(() => {
+    states.tableData = getTableData()
+    states.isLoading = false
+  }, 300)
+}
+
+const addMore = async () => {
   states.isLoading = true
   setTimeout(() => {
-    const itemCount = 500
-    let parentId = 0
-    states.tableData = Array(itemCount).fill(0).map((x, idx) => {
-      const res = {
-        id: idx,
-        parentId: null as number | null,
-        name: 'Test-' + (idx + 1),
-        role: 'Develop',
-        sex: Math.random() < 0.5 ? '1' : '0',
-        age: 28,
-        address: Array(10).fill('long address long long long address').join(', ')
-      }
-      if (Math.random() < 0.5) {
-        parentId = idx
-      }
-      if (Math.random() < 0.5) {
-        res.parentId = parentId
-      }
-      return res
-    })
+    states.tableData = states.tableData.concat(getTableData())
     states.isLoading = false
   }, 300)
 }

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -11,3 +11,7 @@ export * from './useNativeScrollbar'
 const useScrollbars = useScrollbar
 
 export { useElementSize, useElementHover, useScrollbar, useScrollbars, useNativeScrollbar }
+
+const index = { useElementSize, useElementHover, useScrollbar, useScrollbars, useNativeScrollbar }
+
+export default index
diff --git a/vite.config.ts b/vite.config.ts
@@ -25,13 +25,13 @@ export default defineConfig(({ mode }) => {
       ],
     },
     build: {
-      minify: true,
+      minify: false,
       lib: {
         entry: path.resolve(__dirname, './src/hooks/index.ts'),
         name: 'UseHooks',
-        formats: ['es', 'cjs'],
-        fileName: (format) => {
-          const postFix = format === 'cjs' ? 'cjs' : format === 'es' ? 'esm' : 'unknown'
+        formats: ['es', 'umd'],
+        fileName: (format: string) => {
+          const postFix = format === 'umd' ? 'umd' : format === 'es' ? 'esm' : 'unknown'
           return `lib/index.${postFix}.js`
         },
       },
@@ -40,7 +40,7 @@ export default defineConfig(({ mode }) => {
         external: ['vue'],
         output: {
           globals: {
-            vue: 'Vue'
+            vue: 'Vue',
           },
         },
       },