Skip to content

Commit

Permalink
test: perf vxe-table example
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lionad-Morotar
Lionad-Morotar committed Dec 18, 2023
1 parent 6c0c542 commit 4cde05d
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 93 deletions.
118 changes: 59 additions & 59 deletions play/src/vxe-table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
:enable="states.isVirtualScrollbar"
:loading="states.isLoading"
:tree-config="{transform: true}"
:column-config="{resizable: true}"
:column-config="{resizable: true }"
:row-config="{isHover: true}"
:checkbox-config="{labelField: 'id', highlight: true}"
:data="states.tableData"
Expand All @@ -27,79 +27,75 @@
<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="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 field="age1" title="Age" :width="120"></vxe-column>
<vxe-column field="sex1" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age2" title="Age" :width="120"></vxe-column>
<vxe-column field="sex2" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age3" title="Age" :width="120"></vxe-column>
<vxe-column field="sex3" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age4" title="Age" :width="120"></vxe-column>
<vxe-column field="sex4" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age5" title="Age" :width="120"></vxe-column>
<vxe-column field="sex5" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age6" title="Age" :width="120"></vxe-column>
<vxe-column field="sex6" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age7" title="Age" :width="120"></vxe-column>
<vxe-column field="sex7" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age8" title="Age" :width="120"></vxe-column>
<vxe-column field="sex8" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age9" title="Age" :width="120"></vxe-column>
<vxe-column field="sex9" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age10" title="Age" :width="120"></vxe-column>
<vxe-column field="sex10" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age11" title="Age" :width="120"></vxe-column>
<vxe-column field="sex11" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age12" title="Age" :width="120"></vxe-column>
<vxe-column field="sex12" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age13" title="Age" :width="120"></vxe-column>
<vxe-column field="sex13" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age14" title="Age" :width="120"></vxe-column>
<vxe-column field="sex14" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age15" title="Age" :width="120"></vxe-column>
<vxe-column field="sex15" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age16" title="Age" :width="120"></vxe-column>
<vxe-column field="sex16" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age17" title="Age" :width="120"></vxe-column>
<vxe-column field="sex17" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age18" title="Age" :width="120"></vxe-column>
<vxe-column field="sex18" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age19" title="Age" :width="120"></vxe-column>
<vxe-column field="sex19" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column field="age20" title="Age" :width="120"></vxe-column>
<vxe-column field="sex20" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
<vxe-column width="500" fixed="right">
<el-button size="small" type="text">
<el-button size="small" text>
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
<el-button size="small" type="text">
<el-button size="small" text>
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
<el-button size="small" type="text">
<el-button size="small" text>
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
<el-button size="small" type="text">
<el-button size="small" text>
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
<el-button size="small" type="text">
<el-button size="small" text>
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
<el-button size="small" type="text">
<el-button size="small" text>
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
<el-button size="small" type="text">
<el-button size="small" text>
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
<el-button size="small" type="text">
<el-button size="small" text>
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
<el-button size="small" type="text">
<el-button size="small" text>
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
<el-button size="small" type="text">
<el-button size="small" text>
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
</vxe-column>
Expand Down Expand Up @@ -151,9 +147,13 @@ const getTableData = () => {
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(', ')
address: Array(10).fill('long address long long long address').join(', '),
// @ts-ignore
...(Array.from({ length: 19 }).reduce((acc: any, _, idx) => {
acc[`sex${idx + 1}`] = Math.random() < 0.5 ? '1' : '0'
acc[`age${idx + 1}`] = Math.random() < 0.5 ? '1' : '0'
return acc
}, {} as Record<string, string>))
}
if (Math.random() < 0.5) {
parentId = count
Expand Down Expand Up @@ -193,7 +193,7 @@ const measure = (async () => {
}
const startTime = performance.now()
await NativeBird.mapSeries(Array.from({ length: 5 }), async (_, idx) => {
await NativeBird.mapSeries(Array.from({ length: 20 }), async (_, idx) => {
await vxeTableRef.value.scrollTo(0, idx * 30)
})
Expand Down
77 changes: 43 additions & 34 deletions play/src/vxe-table/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
<template>
<vxe-table
:class="[
props.enable ? 'is-virtual-scrollbar' : '',
barStates.isScrolling.x ? 'is-scrolling-x' : '',
barStates.isScrolling.y ? 'is-scrolling-y' : '',
(!barStates.isScrolling.x && !barStates.isScrolling.y) ? 'is-no-scrolling' : '',
]"
:class="kls"
ref="vxeTableRef"
height="100%"
v-bind="$attrs"
Expand All @@ -15,8 +10,8 @@
</template>

<script setup lang="ts">
import { watchEffect, useAttrs, useSlots, nextTick, ref, watch } from "vue";
import { until, eagerComputed, useVModel } from "@vueuse/core";
import { computed, watchEffect, useAttrs, useSlots, nextTick, ref, watch } from "vue";
import { until, refDebounced, eagerComputed, useVModel } from "@vueuse/core";
import { useScrollbar } from "@/hooks";
import { useDefer } from "./hooks";
Expand All @@ -25,7 +20,7 @@ if (!slots.default) {
throw new Error("[ERR] no default slot");
}
const attrs = useAttrs()
const attrs = useAttrs() as any;
const emits = defineEmits(["update:tableRef"]);
const props = defineProps<{
enable: boolean
Expand All @@ -39,9 +34,10 @@ watchEffect(async () => {
if (!vxeTableRef.value) {
return;
}
if (!attrs.columns) {
return;
if (!attrs.data?.length) {
return
}
console.log("[INFO] data", attrs.data?.length);
await nextTick();
try {
const deferLeft = useDefer<HTMLElement>();
Expand All @@ -61,7 +57,6 @@ watchEffect(async () => {
const width = leftFixed.clientWidth;
leftFixedWidth.value = width;
});
const deferRight = useDefer<HTMLElement>();
const tickRight = setInterval(() => {
try {
Expand Down Expand Up @@ -128,6 +123,14 @@ watch(() => props.enable, async (enable) => {
}, {
immediate: true,
})
const kls = refDebounced(computed(() => [
props.enable ? 'is-virtual-scrollbar' : '',
barStates.isDragging.x ? 'is-dragging-x' : '',
barStates.isScrolling.x ? 'is-scrolling-x' : '',
barStates.isScrolling.y ? 'is-scrolling-y' : '',
(!barStates.isScrolling.x && !barStates.isScrolling.y) ? 'is-no-scrolling' : '',
]), 17 * 3)
</script>

<style lang="less">
Expand Down Expand Up @@ -157,9 +160,9 @@ watch(() => props.enable, async (enable) => {
/** test box-shadow on scroll */
.vxe-table.vxe-table.vxe-table {
--color-1: rgb(0 0 0 / 5%);
--color-2: rgb(0 0 0 / 3%);
--color-3: rgb(0 0 0 / 8%);
--color-1: rgba(0, 0, 0, 0%);
--color-2: rgba(0, 0, 0, 0%);
--color-3: rgba(0, 0, 0, 0%);
--left-col-width: v-bind(cssLeftFixedWidth);
--right-col-width: v-bind(cssRightFixedWidth);
Expand All @@ -173,33 +176,39 @@ watch(() => props.enable, async (enable) => {
z-index: 9;
}
.vxe-table--header-wrapper.body--wrapper,
.vxe-table--fixed-left-wrapper,
.vxe-table--fixed-right-wrapper {
box-shadow: 0 0 0 0 var(--color-1), 0 0 0 0 var(--color-2), 0 0 0 -8px var(--color-3);
box-shadow: 0 0 8px 0 var(--color-1), 0 12px 48px 16px var(--color-2), 0 0 16px -8px var(--color-3);
transition: box-shadow 0.35s ease-out;
transition-delay: 0.5s;
will-change: box-shadow;
}
&.is-scrolling-x {
.vxe-table--fixed-left-wrapper,
.vxe-table--fixed-right-wrapper {
box-shadow: 0 9px 28px 0 var(--color-1), 0 12px 48px 16px var(--color-2), 0 6px 16px -8px var(--color-3);
transition: box-shadow 0.25s ease-in;
transition-delay: 0.01s;
}
.vxe-table--header-wrapper.body--wrapper {
box-shadow: 0 0 8px 0 var(--color-1), 0 0 18px 16px var(--color-2), 0 0 16px -8px var(--color-3);
transition: box-shadow 0.35s ease-out;
transition-delay: 0.5s;
will-change: box-shadow;
}
&.is-scrolling-y {
.vxe-table--header-wrapper.body--wrapper {
box-shadow: 0 0 8px 0 var(--color-1), 0 0 12px 18px var(--color-2), 0 0 16px -8px var(--color-3);
transition: box-shadow 0.25s ease-in;
transition-delay: 0.01s;
&:not(.is-dragging-x) {
&.is-scrolling-x {
.vxe-table--fixed-left-wrapper,
.vxe-table--fixed-right-wrapper {
--color-1: rgba(0, 0, 0, 6%);
--color-2: rgba(0, 0, 0, 4%);
--color-3: rgba(0, 0, 0, 10%);
transition: box-shadow 0.25s ease-in;
transition-delay: 0.01s;
}
}
.vxe-table--fixed-left-wrapper .vxe-table--header,
.vxe-table--fixed-right-wrapper .vxe-table--header {
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);
transition: box-shadow 0.25s ease-in;
transition-delay: 0.01s;
&.is-scrolling-y {
.vxe-table--header-wrapper.body--wrapper {
--color-1: rgba(0, 0, 0, 6%);
--color-2: rgba(0, 0, 0, 4%);
--color-3: rgba(0, 0, 0, 10%);
transition: box-shadow 0.25s ease-in;
transition-delay: 0.01s;
}
}
}
}
Expand Down

0 comments on commit 4cde05d

Please sign in to comment.