github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: table sticky scroll bar not reactive

pull/5419/head
tangjinzhou 2022-03-27 10:34:00 +08:00
parent 8e37ffbb97
commit afd74c95d8
2 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/vc-table/Table.tsx
View File

@ -33,6 +33,7 @@ import useSticky from './hooks/useSticky';
import FixedHolder from './FixedHolder'; import FixedHolder from './FixedHolder';
import type { CSSProperties } from 'vue'; import type { CSSProperties } from 'vue';
import { import {
onUpdated,
computed, computed,
defineComponent, defineComponent,
nextTick, nextTick,
@ -327,6 +328,10 @@ export default defineComponent<TableProps<DefaultRecordType>>({
const fullTableRef = ref<HTMLDivElement>(); const fullTableRef = ref<HTMLDivElement>();
const scrollHeaderRef = ref<HTMLDivElement>(); const scrollHeaderRef = ref<HTMLDivElement>();
const scrollBodyRef = ref<HTMLDivElement>(); const scrollBodyRef = ref<HTMLDivElement>();
const scrollBodySizeInfo = ref<{ scrollWidth: number; clientWidth: number }>({
scrollWidth: 0,
clientWidth: 0,
});
const scrollSummaryRef = ref<HTMLDivElement>(); const scrollSummaryRef = ref<HTMLDivElement>();
const [pingedLeft, setPingedLeft] = useState(false); const [pingedLeft, setPingedLeft] = useState(false);
const [pingedRight, setPingedRight] = useState(false); const [pingedRight, setPingedRight] = useState(false);
@ -495,6 +500,18 @@ export default defineComponent<TableProps<DefaultRecordType>>({
nextTick(() => { nextTick(() => {
triggerOnScroll(); triggerOnScroll();
setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.value).width); setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.value).width);
scrollBodySizeInfo.value = {
scrollWidth: scrollBodyRef.value?.scrollWidth || 0,
clientWidth: scrollBodyRef.value?.clientWidth || 0,
};
});
});
onUpdated(() => {
nextTick(() => {
scrollBodySizeInfo.value = {
scrollWidth: scrollBodyRef.value?.scrollWidth || 0,
clientWidth: scrollBodyRef.value?.clientWidth || 0,
};
}); });
}); });
@ -762,6 +779,7 @@ export default defineComponent<TableProps<DefaultRecordType>>({
scrollBodyRef={scrollBodyRef} scrollBodyRef={scrollBodyRef}
onScroll={onScroll} onScroll={onScroll}
container={container} container={container}
scrollBodySizeInfo={scrollBodySizeInfo.value}
/> />
)} )}
</> </>

27
components/vc-table/stickyScrollBar.tsx
View File

@ -1,8 +1,7 @@
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import { import {
watchEffect,
getCurrentInstance, getCurrentInstance,
onBeforeUpdate,
onBeforeMount,
defineComponent, defineComponent,
onBeforeUnmount, onBeforeUnmount,
onMounted, onMounted,
@ -22,12 +21,13 @@ interface StickyScrollBarProps {
onScroll: (params: { scrollLeft?: number }) => void; onScroll: (params: { scrollLeft?: number }) => void;
offsetScroll: number; offsetScroll: number;
container: HTMLElement | Window; container: HTMLElement | Window;
scrollBodySizeInfo: { scrollWidth: number; clientWidth: number };
} }
export default defineComponent<StickyScrollBarProps>({ export default defineComponent<StickyScrollBarProps>({
name: 'StickyScrollBar', name: 'StickyScrollBar',
inheritAttrs: false, inheritAttrs: false,
props: ['offsetScroll', 'container', 'scrollBodyRef'] as any, props: ['offsetScroll', 'container', 'scrollBodyRef', 'scrollBodySizeInfo'] as any,
emits: ['scroll'], emits: ['scroll'],
setup(props, { emit, expose }) { setup(props, { emit, expose }) {
const tableContext = useInjectTable(); const tableContext = useInjectTable();
@ -35,18 +35,15 @@ export default defineComponent<StickyScrollBarProps>({
const bodyWidth = ref(0); const bodyWidth = ref(0);
const scrollBarWidth = ref(0); const scrollBarWidth = ref(0);
const instance = getCurrentInstance(); const instance = getCurrentInstance();
const updateSomeValue = () => { watchEffect(
bodyScrollWidth.value = props.scrollBodyRef.value.scrollWidth || 0; () => {
bodyWidth.value = props.scrollBodyRef.value.clientWidth || 0; bodyScrollWidth.value = props.scrollBodySizeInfo.scrollWidth || 0;
scrollBarWidth.value = bodyWidth.value = props.scrollBodySizeInfo.clientWidth || 0;
bodyScrollWidth.value && bodyWidth.value * (bodyWidth.value / bodyScrollWidth.value); scrollBarWidth.value =
}; bodyScrollWidth.value && bodyWidth.value * (bodyWidth.value / bodyScrollWidth.value);
onBeforeMount(() => { },
updateSomeValue(); { flush: 'post' },
}); );
onBeforeUpdate(() => {
updateSomeValue();
});
const scrollBarRef = ref(); const scrollBarRef = ref();