diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index da6a23ae5..18bed9332 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -18,6 +18,7 @@ - `n-select` adds `node-props` prop. - `n-popselect` adds `node-props` prop. - `n-popselect` adds `virtual-scroll` prop. +- `n-data-table` adds `scrollTo` method, closes [#2570](https://github.com/TuSimple/naive-ui/issues/2570). ## 2.30.3 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 350728649..579947969 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -18,6 +18,7 @@ - `n-select` 新增 `node-props` 属性 - `n-popselect` 新增 `node-props` 属性 - `n-popselect` 新增 `virtual-scroll` 属性 +- `n-data-table` 新增 `scrollTo` 方法,关闭 [#2570](https://github.com/TuSimple/naive-ui/issues/2570) ## 2.30.3 diff --git a/package.json b/package.json index 31b5b8a13..87ae7ed02 100644 --- a/package.json +++ b/package.json @@ -156,7 +156,7 @@ "treemate": "^0.3.11", "vdirs": "^0.1.8", "vooks": "^0.2.12", - "vueuc": "^0.4.39" + "vueuc": "^0.4.40" }, "sideEffects": false, "homepage": "https://www.naiveui.com", diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md index bfb018b29..3cc730c6d 100644 --- a/src/data-table/demos/enUS/index.demo-entry.md +++ b/src/data-table/demos/enUS/index.demo-entry.md @@ -179,13 +179,14 @@ type DataTableCreateSummary = (pageData: RowData[]) => These methods can help you control table in an uncontrolled manner. However, it's not recommended to use them to implement some async operations. If async operations is needed, use table in a **controlled** manner. -| Name | Type | Description | -| --- | --- | --- | -| clearFilters | `() => void` | Clear all filter state. | -| clearSorter | `() => void` | Clear all sort state. | -| filters | `(filters: DataTableFilterState \| null) => void` | Set the active filters of the table. | -| page | `(page: number) => void` | Manually set the page. | -| sort | `(columnKey: string \| number, order: 'ascend' \| 'descend' \| false) => void` | Set the sort state of the table. | +| Name | Type | Description | Version | +| --- | --- | --- | --- | +| clearFilters | `() => void` | Clear all filter state. | | +| clearSorter | `() => void` | Clear all sort state. | | +| filters | `(filters: DataTableFilterState \| null) => void` | Set the active filters of the table. | | +| page | `(page: number) => void` | Manually set the page. | | +| scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | Scroll content. | NEXT_VERSION | +| sort | `(columnKey: string \| number, order: 'ascend' \| 'descend' \| false) => void` | Set the sort state of the table. | | ### DataTable Slots diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md index d73ef8273..8bfa071c6 100644 --- a/src/data-table/demos/zhCN/index.demo-entry.md +++ b/src/data-table/demos/zhCN/index.demo-entry.md @@ -184,13 +184,14 @@ type DataTableCreateSummary = (pageData: RowData[]) => 这些方法可以帮助你在非受控的状态下改变表格,但是,并不推荐在异步的状况下使用这些方法。如果需要异步操作,最好用**受控**的方式使用表格。 -| 名称 | 类型 | 说明 | -| --- | --- | --- | -| clearFilters | `() => void` | 清空所有的 filter 状态 | -| clearSorter | `() => void` | 清空所有的 sort 状态 | -| filters | `(filters: DataTableFilterState \| null) => void` | 设定表格当前的过滤器 | -| page | `(page: number) => void` | 手动设置 page | -| sort | `(columnKey: string \| number \| null, order: 'ascend' \| 'descend' \| false) => void` | 设定表格的过滤状态 | +| 名称 | 类型 | 说明 | 版本 | +| --- | --- | --- | --- | +| clearFilters | `() => void` | 清空所有的 filter 状态 | | +| clearSorter | `() => void` | 清空所有的 sort 状态 | | +| filters | `(filters: DataTableFilterState \| null) => void` | 设定表格当前的过滤器 | | +| page | `(page: number) => void` | 手动设置 page | | +| scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | 滚动内容 | NEXT_VERSION | +| sort | `(columnKey: string \| number \| null, order: 'ascend' \| 'descend' \| false) => void` | 设定表格的过滤状态 | | ### DataTable Slots diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx index 548074cde..aba5fbfcf 100644 --- a/src/data-table/src/DataTable.tsx +++ b/src/data-table/src/DataTable.tsx @@ -402,7 +402,10 @@ export default defineComponent({ clearSorter, page, sort, - clearFilter + clearFilter, + scrollTo: (arg0: any, arg1?: any) => { + mainTableInstRef.value?.scrollTo(arg0, arg1) + } } const cssVarsRef = computed(() => { const { size } = props diff --git a/src/data-table/src/MainTable.tsx b/src/data-table/src/MainTable.tsx index 48107bbdc..c5a4f4f72 100644 --- a/src/data-table/src/MainTable.tsx +++ b/src/data-table/src/MainTable.tsx @@ -61,7 +61,10 @@ export default defineComponent({ } const exposedMethods: MainTableRef = { getBodyElement, - getHeaderElement + getHeaderElement, + scrollTo (arg0: any, arg1?: any) { + bodyInstRef.value?.scrollTo(arg0, arg1) + } } watchEffect(() => { const { value: selfEl } = selfElRef diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx index 450b5b910..03281a5d1 100644 --- a/src/data-table/src/TableParts/Body.tsx +++ b/src/data-table/src/TableParts/Body.tsx @@ -310,7 +310,14 @@ export default defineComponent({ scrollbarInstRef.value?.sync() } const exposedMethods: MainTableBodyRef = { - getScrollContainer + getScrollContainer, + scrollTo (arg0: any, arg1?: any) { + if (virtualScrollRef.value) { + virtualListRef.value?.scrollTo(arg0, arg1) + } else { + scrollbarInstRef.value?.scrollTo(arg0, arg1) + } + } } interface StyleCProps { diff --git a/src/data-table/src/interface.ts b/src/data-table/src/interface.ts index 56326b18a..4ff323604 100644 --- a/src/data-table/src/interface.ts +++ b/src/data-table/src/interface.ts @@ -1,5 +1,6 @@ import { TreeNode } from 'treemate' import { CSSProperties, Ref, VNodeChild, HTMLAttributes, Slots } from 'vue' +import type { ScrollTo } from '../../scrollbar/src/Scrollbar' import { EllipsisProps } from '../../ellipsis/src/Ellipsis' import { NLocale } from '../../locales' import { MergedTheme } from '../../_mixins' @@ -282,10 +283,12 @@ export interface FilterState { export interface MainTableRef { getHeaderElement: () => HTMLElement | null getBodyElement: () => HTMLElement | null + scrollTo: ScrollTo } export interface MainTableBodyRef { getScrollContainer: () => HTMLElement | null + scrollTo: ScrollTo } export interface MainTableHeaderRef { @@ -308,6 +311,7 @@ export interface DataTableInst { clearSorter: () => void page: (page: number) => void sort: (columnKey: ColumnKey, order: SortOrder) => void + scrollTo: ScrollTo /** @deprecated it but just leave it here, it does no harm */ clearFilter: () => void }