perf: table hover & stickyScroll
parent
797a1c6c8f
commit
9004644738
|
@ -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 () => {
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
Loading…
Reference in New Issue