Skip to content

Commit 4cde05d

Browse files
Lionad-MorotarLionad-Morotar
committed
test: perf vxe-table example
1 parent 6c0c542 commit 4cde05d

File tree

2 files changed

+102
-93
lines changed

2 files changed

+102
-93
lines changed

‎play/src/vxe-table.vue

+59-59
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
:enable="states.isVirtualScrollbar"
1616
:loading="states.isLoading"
1717
:tree-config="{transform: true}"
18-
:column-config="{resizable: true}"
18+
:column-config="{resizable: true }"
1919
:row-config="{isHover: true}"
2020
:checkbox-config="{labelField: 'id', highlight: true}"
2121
:data="states.tableData"
@@ -27,79 +27,75 @@
2727
<vxe-column field="name" title="Name" :width="140"></vxe-column>
2828
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
2929
<vxe-column field="address" title="Address" show-overflow :min-width="300"></vxe-column>
30-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
31-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
32-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
33-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
34-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
35-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
36-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
37-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
38-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
39-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
40-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
41-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
42-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
43-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
44-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
45-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
46-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
47-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
48-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
49-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
50-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
51-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
52-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
53-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
54-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
55-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
56-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
57-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
58-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
59-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
60-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
61-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
62-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
63-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
64-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
65-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
66-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
67-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
68-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
69-
<vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
70-
<vxe-column field="age" title="Age" :width="120"></vxe-column>
71-
<vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
72-
<vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
73-
<vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
30+
<vxe-column field="age1" title="Age" :width="120"></vxe-column>
31+
<vxe-column field="sex1" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
32+
<vxe-column field="age2" title="Age" :width="120"></vxe-column>
33+
<vxe-column field="sex2" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
34+
<vxe-column field="age3" title="Age" :width="120"></vxe-column>
35+
<vxe-column field="sex3" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
36+
<vxe-column field="age4" title="Age" :width="120"></vxe-column>
37+
<vxe-column field="sex4" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
38+
<vxe-column field="age5" title="Age" :width="120"></vxe-column>
39+
<vxe-column field="sex5" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
40+
<vxe-column field="age6" title="Age" :width="120"></vxe-column>
41+
<vxe-column field="sex6" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
42+
<vxe-column field="age7" title="Age" :width="120"></vxe-column>
43+
<vxe-column field="sex7" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
44+
<vxe-column field="age8" title="Age" :width="120"></vxe-column>
45+
<vxe-column field="sex8" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
46+
<vxe-column field="age9" title="Age" :width="120"></vxe-column>
47+
<vxe-column field="sex9" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
48+
<vxe-column field="age10" title="Age" :width="120"></vxe-column>
49+
<vxe-column field="sex10" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
50+
<vxe-column field="age11" title="Age" :width="120"></vxe-column>
51+
<vxe-column field="sex11" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
52+
<vxe-column field="age12" title="Age" :width="120"></vxe-column>
53+
<vxe-column field="sex12" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
54+
<vxe-column field="age13" title="Age" :width="120"></vxe-column>
55+
<vxe-column field="sex13" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
56+
<vxe-column field="age14" title="Age" :width="120"></vxe-column>
57+
<vxe-column field="sex14" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
58+
<vxe-column field="age15" title="Age" :width="120"></vxe-column>
59+
<vxe-column field="sex15" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
60+
<vxe-column field="age16" title="Age" :width="120"></vxe-column>
61+
<vxe-column field="sex16" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
62+
<vxe-column field="age17" title="Age" :width="120"></vxe-column>
63+
<vxe-column field="sex17" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
64+
<vxe-column field="age18" title="Age" :width="120"></vxe-column>
65+
<vxe-column field="sex18" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
66+
<vxe-column field="age19" title="Age" :width="120"></vxe-column>
67+
<vxe-column field="sex19" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
68+
<vxe-column field="age20" title="Age" :width="120"></vxe-column>
69+
<vxe-column field="sex20" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
7470
<vxe-column width="500" fixed="right">
75-
<el-button size="small" type="text">
71+
<el-button size="small" text>
7672
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
7773
</el-button>
78-
<el-button size="small" type="text">
74+
<el-button size="small" text>
7975
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
8076
</el-button>
81-
<el-button size="small" type="text">
77+
<el-button size="small" text>
8278
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
8379
</el-button>
84-
<el-button size="small" type="text">
80+
<el-button size="small" text>
8581
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
8682
</el-button>
87-
<el-button size="small" type="text">
83+
<el-button size="small" text>
8884
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
8985
</el-button>
90-
<el-button size="small" type="text">
86+
<el-button size="small" text>
9187
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
9288
</el-button>
93-
<el-button size="small" type="text">
89+
<el-button size="small" text>
9490
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
9591
</el-button>
96-
<el-button size="small" type="text">
92+
<el-button size="small" text>
9793
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
9894
</el-button>
99-
<el-button size="small" type="text">
95+
<el-button size="small" text>
10096
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
10197
</el-button>
102-
<el-button size="small" type="text">
98+
<el-button size="small" text>
10399
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
104100
</el-button>
105101
</vxe-column>
@@ -151,9 +147,13 @@ const getTableData = () => {
151147
parentId: null as number | null,
152148
name: 'Test-' + (count + 1),
153149
role: 'Develop',
154-
sex: Math.random() < 0.5 ? '1' : '0',
155-
age: 28,
156-
address: Array(10).fill('long address long long long address').join(', ')
150+
address: Array(10).fill('long address long long long address').join(', '),
151+
// @ts-ignore
152+
...(Array.from({ length: 19 }).reduce((acc: any, _, idx) => {
153+
acc[`sex${idx + 1}`] = Math.random() < 0.5 ? '1' : '0'
154+
acc[`age${idx + 1}`] = Math.random() < 0.5 ? '1' : '0'
155+
return acc
156+
}, {} as Record<string, string>))
157157
}
158158
if (Math.random() < 0.5) {
159159
parentId = count
@@ -193,7 +193,7 @@ const measure = (async () => {
193193
}
194194
const startTime = performance.now()
195195
196-
await NativeBird.mapSeries(Array.from({ length: 5 }), async (_, idx) => {
196+
await NativeBird.mapSeries(Array.from({ length: 20 }), async (_, idx) => {
197197
await vxeTableRef.value.scrollTo(0, idx * 30)
198198
})
199199

‎play/src/vxe-table/index.vue

+43-34
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
<template>
22
<vxe-table
3-
:class="[
4-
props.enable ? 'is-virtual-scrollbar' : '',
5-
barStates.isScrolling.x ? 'is-scrolling-x' : '',
6-
barStates.isScrolling.y ? 'is-scrolling-y' : '',
7-
(!barStates.isScrolling.x && !barStates.isScrolling.y) ? 'is-no-scrolling' : '',
8-
]"
3+
:class="kls"
94
ref="vxeTableRef"
105
height="100%"
116
v-bind="$attrs"
@@ -15,8 +10,8 @@
1510
</template>
1611

1712
<script setup lang="ts">
18-
import { watchEffect, useAttrs, useSlots, nextTick, ref, watch } from "vue";
19-
import { until, eagerComputed, useVModel } from "@vueuse/core";
13+
import { computed, watchEffect, useAttrs, useSlots, nextTick, ref, watch } from "vue";
14+
import { until, refDebounced, eagerComputed, useVModel } from "@vueuse/core";
2015
import { useScrollbar } from "@/hooks";
2116
import { useDefer } from "./hooks";
2217
@@ -25,7 +20,7 @@ if (!slots.default) {
2520
throw new Error("[ERR] no default slot");
2621
}
2722
28-
const attrs = useAttrs()
23+
const attrs = useAttrs() as any;
2924
const emits = defineEmits(["update:tableRef"]);
3025
const props = defineProps<{
3126
enable: boolean
@@ -39,9 +34,10 @@ watchEffect(async () => {
3934
if (!vxeTableRef.value) {
4035
return;
4136
}
42-
if (!attrs.columns) {
43-
return;
37+
if (!attrs.data?.length) {
38+
return
4439
}
40+
console.log("[INFO] data", attrs.data?.length);
4541
await nextTick();
4642
try {
4743
const deferLeft = useDefer<HTMLElement>();
@@ -61,7 +57,6 @@ watchEffect(async () => {
6157
const width = leftFixed.clientWidth;
6258
leftFixedWidth.value = width;
6359
});
64-
6560
const deferRight = useDefer<HTMLElement>();
6661
const tickRight = setInterval(() => {
6762
try {
@@ -128,6 +123,14 @@ watch(() => props.enable, async (enable) => {
128123
}, {
129124
immediate: true,
130125
})
126+
127+
const kls = refDebounced(computed(() => [
128+
props.enable ? 'is-virtual-scrollbar' : '',
129+
barStates.isDragging.x ? 'is-dragging-x' : '',
130+
barStates.isScrolling.x ? 'is-scrolling-x' : '',
131+
barStates.isScrolling.y ? 'is-scrolling-y' : '',
132+
(!barStates.isScrolling.x && !barStates.isScrolling.y) ? 'is-no-scrolling' : '',
133+
]), 17 * 3)
131134
</script>
132135

133136
<style lang="less">
@@ -157,9 +160,9 @@ watch(() => props.enable, async (enable) => {
157160
158161
/** test box-shadow on scroll */
159162
.vxe-table.vxe-table.vxe-table {
160-
--color-1: rgb(0 0 0 / 5%);
161-
--color-2: rgb(0 0 0 / 3%);
162-
--color-3: rgb(0 0 0 / 8%);
163+
--color-1: rgba(0, 0, 0, 0%);
164+
--color-2: rgba(0, 0, 0, 0%);
165+
--color-3: rgba(0, 0, 0, 0%);
163166
--left-col-width: v-bind(cssLeftFixedWidth);
164167
--right-col-width: v-bind(cssRightFixedWidth);
165168
@@ -173,33 +176,39 @@ watch(() => props.enable, async (enable) => {
173176
z-index: 9;
174177
}
175178
176-
.vxe-table--header-wrapper.body--wrapper,
177179
.vxe-table--fixed-left-wrapper,
178180
.vxe-table--fixed-right-wrapper {
179-
box-shadow: 0 0 0 0 var(--color-1), 0 0 0 0 var(--color-2), 0 0 0 -8px var(--color-3);
181+
box-shadow: 0 0 8px 0 var(--color-1), 0 12px 48px 16px var(--color-2), 0 0 16px -8px var(--color-3);
180182
transition: box-shadow 0.35s ease-out;
181183
transition-delay: 0.5s;
182184
will-change: box-shadow;
183185
}
184-
&.is-scrolling-x {
185-
.vxe-table--fixed-left-wrapper,
186-
.vxe-table--fixed-right-wrapper {
187-
box-shadow: 0 9px 28px 0 var(--color-1), 0 12px 48px 16px var(--color-2), 0 6px 16px -8px var(--color-3);
188-
transition: box-shadow 0.25s ease-in;
189-
transition-delay: 0.01s;
190-
}
186+
.vxe-table--header-wrapper.body--wrapper {
187+
box-shadow: 0 0 8px 0 var(--color-1), 0 0 18px 16px var(--color-2), 0 0 16px -8px var(--color-3);
188+
transition: box-shadow 0.35s ease-out;
189+
transition-delay: 0.5s;
190+
will-change: box-shadow;
191191
}
192-
&.is-scrolling-y {
193-
.vxe-table--header-wrapper.body--wrapper {
194-
box-shadow: 0 0 8px 0 var(--color-1), 0 0 12px 18px var(--color-2), 0 0 16px -8px var(--color-3);
195-
transition: box-shadow 0.25s ease-in;
196-
transition-delay: 0.01s;
192+
193+
&:not(.is-dragging-x) {
194+
&.is-scrolling-x {
195+
.vxe-table--fixed-left-wrapper,
196+
.vxe-table--fixed-right-wrapper {
197+
--color-1: rgba(0, 0, 0, 6%);
198+
--color-2: rgba(0, 0, 0, 4%);
199+
--color-3: rgba(0, 0, 0, 10%);
200+
transition: box-shadow 0.25s ease-in;
201+
transition-delay: 0.01s;
202+
}
197203
}
198-
.vxe-table--fixed-left-wrapper .vxe-table--header,
199-
.vxe-table--fixed-right-wrapper .vxe-table--header {
200-
box-shadow: 0 0 8px 0 var(--shadow-color-1), 0 0 12px 18px var(--shadow-color-2), 0 0 16px -8px var(--shadow-color-3);
201-
transition: box-shadow 0.25s ease-in;
202-
transition-delay: 0.01s;
204+
&.is-scrolling-y {
205+
.vxe-table--header-wrapper.body--wrapper {
206+
--color-1: rgba(0, 0, 0, 6%);
207+
--color-2: rgba(0, 0, 0, 4%);
208+
--color-3: rgba(0, 0, 0, 10%);
209+
transition: box-shadow 0.25s ease-in;
210+
transition-delay: 0.01s;
211+
}
203212
}
204213
}
205214
}

0 commit comments

Comments
 (0)