javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [el-scrollbar] expose scrollTo method (#6663)

Browse Source 
* feat(components): [el-scrollbar] expose scrollTo method

* chore: improve code
This commit is contained in:
msidolphin
2022-03-31 14:25:58 +08:00
committed by GitHub
parent 0c905bbf7e
commit d3756d941e
4 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/en-US/component/scrollbar.md
View File

@@ -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

30
docs/en-US/component/table.md
View File

@@ -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

13
packages/components/scrollbar/src/scrollbar.vue
View File

@@ -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,
}

8
packages/components/table/src/composables/use-scrollbar.ts
View File

@@ -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) => {