树形 ^0.7.0

通过下面两步开启树形功能

配置 StkTableColumn['type'] 为 tree-node 来指定树形展开按钮的位置

const columns: StkTableColumn<any>[] = [
    { type: 'tree-node', title: 'Area', dataIndex: 'area' },
]

数据源加 children 字段。点击后会将数据中的 children 字段中的内容，作为子节点进行展示。

export const getDataSource = () => [ 
    {
        area: 'Asia',
        gdp: 10000,
        population: 50000000,
        gdpPerCapita: 20000,
        children: [
            { area: 'China', gdp: 5000, population: 1400000000, gdpPerCapita: 35000, }, 
            { area: 'Japan', gdp: 4000, population: 126000000, gdpPerCapita: 33000, }
        ],
    },
];

简单树形

默认展开节点

WARNING

通过 props.treeConfig 配置的展开只对第一次渲染表格的时候生效。

异步数据请使用 expose.setTreeExpand() 函数控制。

全部展开

treeConfig.defaultExpandAll = true

展开指定层级

treeConfig.defaultExpandLevel = 1

展开指定节点

treeConfig.defaultExpandedKeys = ['Asia', 'China', 'Zhejiang']

下方 Toggle China 按钮使用 setTreeExpand() 来控制 China 行的展开关闭。

手动展开节点

通过 setTreeExpand 方法手动控制节点的展开/折叠。

下方示例展示了不同参数的用法：

Toggle All：切换所有根节点的展开/折叠状态（传入整个 dataSource 数组，{ all: true }）
Collapse All：折叠所有根节点（传入整个 dataSource 数组，{ all: true, expand: false }）
Toggle Asia：切换 Asia 节点的展开/折叠状态
Expand All Asia：展开 Asia 的所有后代节点（{ expand: true, all: true }）
Collapse All Asia：折叠 Asia 的所有后代节点（{ expand: false, all: true }）
Expand Asia to Level 2：展开 Asia 到第 2 层（{ expand: true, level: 2 }）
Collapse Asia to Level 1：折叠 Asia 到第 1 层（{ expand: false, level: 1 }）
Expand Parents of Zhejiang：自动展开 Zhejiang 的所有父节点（Asia → China），Zhejiang 自身因有子节点 Hangzhou 也会一并展开（{ expand: true, parents: true }）
Collapse Parents of Zhejiang：收起 Zhejiang 的所有父节点（{ expand: false, parents: true }）

懒加载子节点 ^1.2.7

当节点子级需要按需拉取（组织树、目录树、万级节点）时，开启 treeConfig.lazy，组件会在展开“标记有子节点但尚未加载”的行时调用 treeConfig.loadMethod(row, col) 拉取子节点，全程由组件管理加载态，使用方只提供取数函数。

const treeConfig = {
    lazy: true,
    // 返回 resolve 为子行数组的 Promise
    loadMethod: (row, col) => fetchChildren(row.id),
    // 可选：判定“有子节点”的字段名，默认 'hasChildren'
    hasChildField: 'hasChildren',
    // 可选：取数失败回调
    onLoadError: (error, row, col) => console.error(error),
};

规则：

根层数据仍由 props.dataSource 提供；子层由 loadMethod 下钻加载。
可展开判定：行 children 已存在或 row.hasChildren 为真时显示展开箭头，两者皆无视为叶子节点。
加载中展开箭头位置显示 loading 图标，**整行（<tr>）**附 is-tree-loading 类名（样式可覆盖）。
加载成功的节点会被缓存，收起再展开不会重复请求；需要刷新时调用 reloadTreeNode() 强制重新加载。
加载失败（Promise reject）时该行保持折叠、不标记已加载，下次展开可重试，并触发 onLoadError。
lazy 为真时，defaultExpandAll / defaultExpandLevel 与 setTreeExpand(..., { all: true } / { level }) 遇到未加载分支即停止展开（不会一次展开全部时发起 N 个链式请求）；setTreeExpand(row, { parents: true }) 则按需链式加载未加载的祖先（该分支返回 Promise）。

层级引导线 ^1.2.7

开启 treeConfig.showGuide（默认 false）后，tree-node 列会在每行的缩进区域按层级各绘制一根竖向引导线，帮助直观判断子行所属层级。引导线只覆盖祖先各格（第 0 层到第 level-1 层），行自身的控件格不画线。关闭时保持既有纯缩进行为，不渲染任何引导线。

const treeConfig = {
    // 按层级显示竖向引导线
    showGuide: true,
};

说明

引导线为“每层级一根贯穿竖线”风格，并非精确的 last-child 截断 / T 型树连接线。
可通过 CSS 变量调整外观：--tree-guide-color（颜色）、--tree-guide-width（线宽，默认 1px）、--tree-guide-mask（虚线遮罩，默认 none 即实线，设为纵向 repeating 渐变取交集画虚线，如 repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 8px)），暗色主题有各自默认值。
换更宽的箭头/图标时覆盖 --tree-indent-width（默认 16px），缩进格、控件占位格与引导线步长会一起缩放。tree-node 列配 customCell 整格自绘（含文件夹开合图标示例）见文件管理树。

用 customCell 自定义树节点（替换展开图标） ^1.2.7

tree-node 列同样可以配 customCell：整格由你渲染，内置的「按层级缩进 + 引导线」与「箭头 / 懒加载 loading」分别经 stkTreeIndent、stkFoldIcon 两个插槽透传回来（注意它们是你的单元格组件的插槽，不是 StkTable 顶层插槽），由你决定渲染与否、摆在何处。

如果不需要改变默认布局，可以直接从 stk-table-vue 导入 StkTreeCell 作为 customCell；需要自行组合时可使用 StkTreeIndent 和 StkTreeFoldIcon。后两者分别接收 level / showGuide 与 expandable / loading / expanded。

可运行示例（自绘文件夹开 / 合图标、以及保留内置箭头只改标签两种）与摆放契约、代码骨架见文件管理树。

虚拟列表

注意

组件会在dataSource的每一行中注入__T_EXP__ 字段，用于控制是否展开。在更新一行的数据时，不要修改这个字段。因此样例中使用 Object.assign 来更新数据。

性能提醒

即使用了虚拟列表，由于 props.dataSource 的每一次变化，都会导致组件内部遍历 dataSource 来展平数据。因此对于频繁变化的数据，将占用电脑更多的计算资源。如果对性能有一定要求，可参考示例-大量数据，自行实现树形展开逻辑。

排序

默认情况下，点击表头排序时，会对当前层级的数据进行排序。如果需要对子节点也进行排序，需要配置 sortConfig.sortChildren = true。 v0.8.8

详情见排序

树形 ^0.7.0 ​

简单树形 ​

默认展开节点 ​

全部展开 ​

展开指定层级 ​

展开指定节点 ​

手动展开节点 ​

懒加载子节点 ^1.2.7 ​

层级引导线 ^1.2.7 ​

用 customCell 自定义树节点（替换展开图标） ^1.2.7 ​

虚拟列表 ​

排序 ​