setTreeColumnCode(v)}
+ dataSource={columns4.slice(0, 4).map(({ code, name }: any) => ({ label: name, value: code }))}
+ />
openKeys: {openKeys.join(', ')} {openKeys.length === 0 && '[空]'}
diff --git a/packages/website/examples/scroll-to.mdx b/packages/website/examples/scroll-to.mdx
new file mode 100644
index 000000000..9f3393317
--- /dev/null
+++ b/packages/website/examples/scroll-to.mdx
@@ -0,0 +1,11 @@
+---
+id: scroll-to
+title: 滚动到指定位置
+hide_table_of_contents: true
+hide_title: true
+---
+
+import * as stories from './scroll-to.stories.tsx'
+import { Stories } from './helpers/Stories'
+
+
diff --git a/packages/website/examples/scroll-to.stories.tsx b/packages/website/examples/scroll-to.stories.tsx
new file mode 100644
index 000000000..519203e2e
--- /dev/null
+++ b/packages/website/examples/scroll-to.stories.tsx
@@ -0,0 +1,143 @@
+import { ArtColumn, features, useTablePipeline } from 'ali-react-table'
+import { WebsiteBaseTable } from 'assets/WebsiteBaseTable'
+import React, { useRef, useState } from 'react'
+import { Button, Checkbox, Divider } from "@alifd/next";
+
+export default { title: '滚动到指定位置' }
+
+interface Node {
+ id: string,
+ pid: string,
+ name?: string,
+ value?: string,
+ children?: Node[]
+}
+
+const ROOT_ID = '0'
+const NODE = 10000 // 一级节点数量
+const CHILDREN = 3 // 后代节点数量
+const TEXT = 100 // 随机文本长度
+
+const random = (count: number) => Math.ceil(Math.random() * count)
+
+const buildData = function (depth: number, size: number, pid: string, parents: Node[]) {
+ for (let i = 0; i < size; i++) {
+ const id = [pid, i + 1].join('-')
+ const node: Node = {
+ id,
+ pid: pid,
+ name: `键-${id}`,
+ value: new Array(random(TEXT)).fill('文本').join('-'),
+ children: []
+ }
+ parents.push(node)
+ depth > 0 && buildData(depth - 1, CHILDREN, node.id, node.children)
+ }
+}
+
+const dataSource: Node[] = []
+buildData(3, NODE, ROOT_ID, dataSource)
+
+/**
+ * 根据节点查找所有上级节点，返回完整层级的key集合
+ * @param node
+ * @param tree
+ * @param idProp
+ * @param pidProp
+ */
+function findParents (node: any, tree: any[], idProp = 'id', pidProp = 'pid'): string[] {
+ const findParentById = (id: string, nodes: any[], parents: any[]) => {
+ for (let i = 0; i < nodes.length; i++) {
+ let item = nodes[i]
+ if (item[idProp] === id) {
+ return parents.push(item)
+ }
+ if (item.children && item.children.length) {
+ findParentById(id, item.children, parents)
+ }
+ }
+ }
+ const findParentChainById = (id: string, nodes: any[], parents: any[] = [], index = 0) => {
+ if (id === '0') return
+ findParentById(id, nodes, parents)
+ findParentChainById(parents[index][pidProp], nodes, parents, ++index)
+ return parents
+ }
+ return findParentChainById(node[idProp], tree).map(item => item[idProp])
+}
+
+export function 基本用法 () {
+ const columns: ArtColumn[] = [
+ { code: 'index', name: '索引', width: 80, align: 'center', getValue: (row: any, rowIndex: number): any => rowIndex },
+ { code: 'name', name: '键', width: 200 },
+ { code: 'value', name: '值', width: 200 },
+ ]
+
+ const [useDiv, setUseDiv] = useState(true)
+ const [openKeys, setOpenKeys] = useState([])
+ const [rowIndex, setRowIndex] = useState(0)
+ const [rowKey, setRowKey] = useState('?')
+
+ const tableRef = useRef(null)
+
+ const pipeline = useTablePipeline()
+ .input({ dataSource: dataSource, columns: columns })
+ .primaryKey('id')
+ .use(features.columnResize())
+ .use(features.treeMode({
+ openKeys,
+ onChangeOpenKeys: setOpenKeys,
+ treeColumnCode: 'name'
+ }))
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
setUseDiv(v)}>使用DIV作为容器
+
+
+
+