diff --git a/docs/en-US/component/scrollbar.md b/docs/en-US/component/scrollbar.md index e4b4345746..ab321f952a 100644 --- a/docs/en-US/component/scrollbar.md +++ b/docs/en-US/component/scrollbar.md @@ -63,11 +63,12 @@ scrollbar/manual-scroll ## Scrollbar Methods -| Method | Description | Parameters | -| ------------- | ------------------------------- | -------------------- | -| setScrollTop | Set distance to scroll top | (scrollTop: number) | -| setScrollLeft | Set distance to scroll left | (scrollLeft: number) | -| update | update scrollbar state manually | — | +| Method | Description | Parameters | +| ------------- | ------------------------------------------ | ----------------------------------------------------- | +| scrollTo | scrolls to a particular set of coordinates | (options: ScrollToOptions \| number, yCoord?: number) | +| setScrollTop | Set distance to scroll top | (scrollTop: number) | +| setScrollLeft | Set distance to scroll left | (scrollLeft: number) | +| update | update scrollbar state manually | — | ## Scrollbar Slots diff --git a/docs/en-US/component/table.md b/docs/en-US/component/table.md index 28c414e620..cb3b5275cc 100644 --- a/docs/en-US/component/table.md +++ b/docs/en-US/component/table.md @@ -278,21 +278,21 @@ table/table-layout ## Table Methods -| Method | Description | Parameters | -| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -| clearSelection | used in multiple selection Table, clear user selection | — | -| getSelectionRows | returns the currently selected rows | | -| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected | -| toggleAllSelection | used in multiple selection Table, toggle select all and deselect all | — | -| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded | -| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row | -| clearSort | clear sorting, restore data to the original order | — | -| clearFilter | clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters | columnKeys | -| doLayout | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — | -| sort | sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order | prop: string, order: string | -| scrollTo | scrolls to a particular set of coordinates | `{ top?: number, left?: number }` | -| setScrollTop | set vertical scroll position | top | -| setScrollLeft | set horizontal scroll position | left | +| Method | Description | Parameters | +| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | +| clearSelection | used in multiple selection Table, clear user selection | — | +| getSelectionRows | returns the currently selected rows | | +| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected | +| toggleAllSelection | used in multiple selection Table, toggle select all and deselect all | — | +| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded | +| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row | +| clearSort | clear sorting, restore data to the original order | — | +| clearFilter | clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters | columnKeys | +| doLayout | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — | +| sort | sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order | prop: string, order: string | +| scrollTo | scrolls to a particular set of coordinates | (options: ScrollToOptions \| number, yCoord?: number) | +| setScrollTop | set vertical scroll position | top | +| setScrollLeft | set horizontal scroll position | left | ## Table Slots diff --git a/packages/components/scrollbar/src/scrollbar.vue b/packages/components/scrollbar/src/scrollbar.vue index c6ced7d956..075f0917cc 100644 --- a/packages/components/scrollbar/src/scrollbar.vue +++ b/packages/components/scrollbar/src/scrollbar.vue @@ -43,7 +43,7 @@ import { watch, } from 'vue' import { useEventListener, useResizeObserver } from '@vueuse/core' -import { addUnit, debugWarn, isNumber } from '@element-plus/utils' +import { addUnit, debugWarn, isNumber, isObject } from '@element-plus/utils' import { scrollbarContextKey } from '@element-plus/tokens' import { useNamespace } from '@element-plus/hooks' import Bar from './bar.vue' @@ -97,6 +97,16 @@ export default defineComponent({ } } + function scrollTo(xCord: number, yCord?: number): void + function scrollTo(options: ScrollToOptions): void + function scrollTo(arg1: unknown, arg2?: number) { + if (isObject(arg1)) { + wrap$.value!.scrollTo(arg1) + } else if (isNumber(arg1) && isNumber(arg2)) { + wrap$.value!.scrollTo(arg1, arg2) + } + } + const setScrollTop = (value: number) => { if (!isNumber(value)) { debugWarn(SCOPE, 'value must be a number') @@ -190,6 +200,7 @@ export default defineComponent({ style, update, handleScroll, + scrollTo, setScrollTop, setScrollLeft, } diff --git a/packages/components/table/src/composables/use-scrollbar.ts b/packages/components/table/src/composables/use-scrollbar.ts index f0e1b71cd5..8efeda0089 100644 --- a/packages/components/table/src/composables/use-scrollbar.ts +++ b/packages/components/table/src/composables/use-scrollbar.ts @@ -4,9 +4,11 @@ import { isNumber } from '@element-plus/utils' export const useScrollbar = () => { const scrollBarRef = ref() - const scrollTo = ({ top, left }: { top?: number; left?: number }) => { - setScrollTop(top) - setScrollLeft(left) + const scrollTo = (options: ScrollToOptions | number, yCoord?: number) => { + const scrollbar = scrollBarRef.value + if (scrollbar) { + scrollbar.scrollTo(options, yCoord) + } } const setScrollPosition = (position: 'Top' | 'Left', offset?: number) => {