From d435a6a6fcda591e48ac2a7cf6d3de0aff3c5808 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Sun, 13 Mar 2022 23:00:58 +0800
Subject: [PATCH] feat(components): [el-table] exposes scroll methods (#6539)

* feat(components): [el-table] exposes scroll methods

* chore: improve code
---
 docs/en-US/component/table.md                 | 27 ++++++++++--------
 .../table/fixed-header-with-fluid-header.vue  |  3 +-
 .../table/src/composables/use-scrollbar.ts    | 28 +++++++++++++++++++
 packages/components/table/src/table.vue       | 10 ++++++-
 .../table/src/table/style-helper.ts           | 10 +++----
 5 files changed, 59 insertions(+), 19 deletions(-)
 create mode 100644 packages/components/table/src/composables/use-scrollbar.ts

diff --git a/docs/en-US/component/table.md b/docs/en-US/component/table.md
index 35e79d65ae..cf3d2fd3b7 100644
--- a/docs/en-US/component/table.md
+++ b/docs/en-US/component/table.md
@@ -278,18 +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 |
+| 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                              |
 
 ## Table Slots
 
diff --git a/docs/examples/table/fixed-header-with-fluid-header.vue b/docs/examples/table/fixed-header-with-fluid-header.vue
index 71ff8d2e46..d689ca2825 100644
--- a/docs/examples/table/fixed-header-with-fluid-header.vue
+++ b/docs/examples/table/fixed-header-with-fluid-header.vue
@@ -25,6 +25,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import dayjs from 'dayjs'
 
 const now = new Date()
 
@@ -62,7 +63,7 @@ const deleteRow = (index: number) => {
 const onAddItem = () => {
   now.setDate(now.getDate() + 1)
   tableData.value.push({
-    date: now.toLocaleString(),
+    date: dayjs(now).format('YYYY-MM-DD'),
     name: 'Tom',
     state: 'California',
     city: 'Los Angeles',
diff --git a/packages/components/table/src/composables/use-scrollbar.ts b/packages/components/table/src/composables/use-scrollbar.ts
new file mode 100644
index 0000000000..f0e1b71cd5
--- /dev/null
+++ b/packages/components/table/src/composables/use-scrollbar.ts
@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+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 setScrollPosition = (position: 'Top' | 'Left', offset?: number) => {
+    const scrollbar = scrollBarRef.value
+    if (scrollbar && isNumber(offset) && ['Top', 'Left'].includes(position)) {
+      scrollbar[`setScroll${position}`](offset)
+    }
+  }
+
+  const setScrollTop = (top?: number) => setScrollPosition('Top', top)
+  const setScrollLeft = (left?: number) => setScrollPosition('Left', left)
+
+  return {
+    scrollBarRef,
+    scrollTo,
+    setScrollTop,
+    setScrollLeft,
+  }
+}
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index b11bdb5157..caba8236a0 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -59,7 +59,7 @@
       </div>
       <div ref="bodyWrapper" :style="bodyHeight" :class="ns.e('body-wrapper')">
         <el-scrollbar
-          ref="scrollWrapper"
+          ref="scrollBarRef"
           :height="maxHeight ? undefined : height"
           :max-height="maxHeight ? height : undefined"
           :view-style="scrollbarViewStyle"
@@ -158,6 +158,7 @@ import useStyle from './table/style-helper'
 import defaultProps from './table/defaults'
 import { TABLE_INJECTION_KEY } from './tokens'
 import { hColgroup } from './h-helper'
+import { useScrollbar } from './composables/use-scrollbar'
 
 import type { Table } from './table/defaults'
 
@@ -250,6 +251,9 @@ export default defineComponent({
       scrollbarViewStyle,
     } = useStyle<Row>(props, layout, store, table)
 
+    const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } =
+      useScrollbar()
+
     const debouncedUpdateLayout = debounce(doLayout, 50)
 
     const tableId = `el-table_${tableIdSeed++}`
@@ -308,6 +312,10 @@ export default defineComponent({
       computedEmptyText,
       tableLayout,
       scrollbarViewStyle,
+      scrollBarRef,
+      scrollTo,
+      setScrollLeft,
+      setScrollTop,
     }
   },
 })
diff --git a/packages/components/table/src/table/style-helper.ts b/packages/components/table/src/table/style-helper.ts
index c0f4704d4e..d60b8b6ac8 100644
--- a/packages/components/table/src/table/style-helper.ts
+++ b/packages/components/table/src/table/style-helper.ts
@@ -156,7 +156,7 @@ function useStyle<T>(
     return false
   }
   const syncPostion = function () {
-    if (!table.refs.scrollWrapper) return
+    if (!table.refs.scrollBarRef) return
     if (!layout.scrollX.value) {
       const scrollingNoneClass = 'is-scrolling-none'
       if (!hasScrollClass(scrollingNoneClass)) {
@@ -164,7 +164,7 @@ function useStyle<T>(
       }
       return
     }
-    const scrollContainer = table.refs.scrollWrapper.wrap$
+    const scrollContainer = table.refs.scrollBarRef.wrap$
     if (!scrollContainer) return
     const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer
     const { headerWrapper, footerWrapper } = table.refs
@@ -181,8 +181,8 @@ function useStyle<T>(
   }
 
   const bindEvents = () => {
-    if (!table.refs.scrollWrapper) return
-    table.refs.scrollWrapper.wrap$?.addEventListener('scroll', syncPostion, {
+    if (!table.refs.scrollBarRef) return
+    table.refs.scrollBarRef.wrap$?.addEventListener('scroll', syncPostion, {
       passive: true,
     })
     if (props.fit) {
@@ -195,7 +195,7 @@ function useStyle<T>(
     unbindEvents()
   })
   const unbindEvents = () => {
-    table.refs.scrollWrapper.wrap$?.removeEventListener(
+    table.refs.scrollBarRef.wrap$?.removeEventListener(
       'scroll',
       syncPostion,
       true