perf: table hover & stickyScroll

pull/5440/head
tangjinzhou 2022-03-30 22:38:19 +08:00
parent 797a1c6c8f
commit 9004644738
3 changed files with 9 additions and 14 deletions

View File

@ -46,12 +46,16 @@ export default defineComponent<BodyProps<any>>({
); );
const startRow = ref(-1); const startRow = ref(-1);
const endRow = ref(-1); const endRow = ref(-1);
let timeoutId: any;
useProvideHover({ useProvideHover({
startRow, startRow,
endRow, endRow,
onHover: (start, end) => { onHover: (start, end) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
startRow.value = start; startRow.value = start;
endRow.value = end; endRow.value = end;
}, 100);
}, },
}); });
return () => { return () => {

View File

@ -22,6 +22,7 @@ import { useInjectHover } from '../context/HoverContext';
import { useInjectSticky } from '../context/StickyContext'; import { useInjectSticky } from '../context/StickyContext';
import { warning } from '../../vc-util/warning'; import { warning } from '../../vc-util/warning';
import type { MouseEventHandler } from '../../_util/EventInterface'; import type { MouseEventHandler } from '../../_util/EventInterface';
import eagerComputed from '../../_util/eagerComputed';
/** Check if cell is in hover range */ /** Check if cell is in hover range */
function inHoverRange(cellStartRow: number, cellRowSpan: number, startRow: number, endRow: number) { function inHoverRange(cellStartRow: number, cellRowSpan: number, startRow: number, endRow: number) {
@ -120,7 +121,7 @@ export default defineComponent<CellProps>({
(props.additionalProps?.rowspan as number) (props.additionalProps?.rowspan as number)
); );
}); });
const hovering = computed(() => { const hovering = eagerComputed(() => {
const { index } = props; const { index } = props;
return inHoverRange(index, rowSpan.value || 1, startRow.value, endRow.value); return inHoverRange(index, rowSpan.value || 1, startRow.value, endRow.value);
}); });

View File

@ -1,13 +1,5 @@
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import { import { watchEffect, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';
watchEffect,
getCurrentInstance,
defineComponent,
onBeforeUnmount,
onMounted,
ref,
watch,
} from 'vue';
import addEventListenerWrap from '../vc-util/Dom/addEventListener'; import addEventListenerWrap from '../vc-util/Dom/addEventListener';
import { getOffset } from '../vc-util/Dom/css'; import { getOffset } from '../vc-util/Dom/css';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
@ -34,7 +26,6 @@ export default defineComponent<StickyScrollBarProps>({
const bodyScrollWidth = ref(0); const bodyScrollWidth = ref(0);
const bodyWidth = ref(0); const bodyWidth = ref(0);
const scrollBarWidth = ref(0); const scrollBarWidth = ref(0);
const instance = getCurrentInstance();
watchEffect( watchEffect(
() => { () => {
bodyScrollWidth.value = props.scrollBodySizeInfo.scrollWidth || 0; bodyScrollWidth.value = props.scrollBodySizeInfo.scrollWidth || 0;
@ -120,7 +111,6 @@ export default defineComponent<StickyScrollBarProps>({
isHiddenScrollBar: false, isHiddenScrollBar: false,
})); }));
} }
instance.update?.();
}; };
const setScrollLeft = (left: number) => { const setScrollLeft = (left: number) => {