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

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

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