mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
feat(components): [el-table] exposes scroll methods (#6539)
* feat(components): [el-table] exposes scroll methods * chore: improve code
This commit is contained in:
msidolphin
@@ -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
|
||||
|
||||
|
||||
@@ -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',
|
||||
|
||||
28
packages/components/table/src/composables/use-scrollbar.ts
Normal file
28
packages/components/table/src/composables/use-scrollbar.ts
Normal file
@@ -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,
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user