开发预览更新于 2026-05-10

TreeTable 树形表格

表格行可展开成子行；indent + chevron 控制；变形自 CfTable + 树形数据。

基础用法

数据是嵌套结构（默认 children 字段，可改 childrenKey）。第一列自动渲染缩进 + chevron。只有展开的分支才参与渲染（节省 DOM），整个树用 defaultExpandedKeys 初始化。

背景视口

名称

大小

修改时间

src

—

今天 09:14

index.ts

2.1 KB

今天 09:12

components

—

昨天

Button.vue

4.4 KB

昨天

Input.vue

6.2 KB

昨天

docs

—

2 天前

src/App.vue

<script setup lang="ts">
import { CfTreeTable, type TreeTableColumn } from '@chufix-design/vue';

interface Row extends Record<string, unknown> {
  name: string;
  size: string;
  modified: string;
  children?: Row[];
}

const data: Row[] = [
  {
    name: 'src',
    size: '—',
    modified: '今天 09:14',
    children: [
      { name: 'index.ts', size: '2.1 KB', modified: '今天 09:12' },
      {
        name: 'components',
        size: '—',
        modified: '昨天',
        children: [
          { name: 'Button.vue', size: '4.4 KB', modified: '昨天' },
          { name: 'Input.vue',  size: '6.2 KB', modified: '昨天' },
        ],
      },
    ],
  },
  {
    name: 'docs',
    size: '—',
    modified: '2 天前',
    children: [
      { name: 'README.md', size: '1.8 KB', modified: '2 天前' },
    ],
  },
];

const columns: TreeTableColumn<Row>[] = [
  { key: 'name',     label: '名称' },
  { key: 'size',     label: '大小',     align: 'right', width: 100 },
  { key: 'modified', label: '修改时间', width: 140 },
];
</script>
<template>
  <CfTreeTable
    :data="data"
    :columns="columns"
    :default-expanded-keys="['0', '0.1']"
  />
</template>

<script setup>
import { CfTreeTable } from '@chufix-design/vue';

const data= [
  {
    name: 'src',
    size: '—',
    modified: '今天 09:14',
    children: [
      { name: 'index.ts', size: '2.1 KB', modified: '今天 09:12' },
      {
        name: 'components',
        size: '—',
        modified: '昨天',
        children: [
          { name: 'Button.vue', size: '4.4 KB', modified: '昨天' },
          { name: 'Input.vue',  size: '6.2 KB', modified: '昨天' },
        ],
      },
    ],
  },
  {
    name: 'docs',
    size: '—',
    modified: '2 天前',
    children: [
      { name: 'README.md', size: '1.8 KB', modified: '2 天前' },
    ],
  },
];

const columns= [
  { key: 'name',     label: '名称' },
  { key: 'size',     label: '大小',     align: 'right', width: 100 },
  { key: 'modified', label: '修改时间', width: 140 },
];
</script>
<template>
  <CfTreeTable
    :data="data"
    :columns="columns"
    :default-expanded-keys="['0', '0.1']"
  />
</template>

import { CfTreeTable } from '@chufix-design/react';

export default function Demo() {
  interface Row extends Record<string, unknown> {
    name: string;
    size: string;
    modified: string;
    children?: Row[];
  }

  const data: Row[] = [
    {
      name: 'src',
      size: '—',
      modified: '今天 09:14',
      children: [
        { name: 'index.ts', size: '2.1 KB', modified: '今天 09:12' },
        {
          name: 'components',
          size: '—',
          modified: '昨天',
          children: [
            { name: 'Button.vue', size: '4.4 KB', modified: '昨天' },
            { name: 'Input.vue',  size: '6.2 KB', modified: '昨天' },
          ],
        },
      ],
    },
    {
      name: 'docs',
      size: '—',
      modified: '2 天前',
      children: [
        { name: 'README.md', size: '1.8 KB', modified: '2 天前' },
      ],
    },
  ];

  const columns: TreeTableColumn<Row>[] = [
    { key: 'name',     label: '名称' },
    { key: 'size',     label: '大小',     align: 'right', width: 100 },
    { key: 'modified', label: '修改时间', width: 140 },
  ];
  return (
    <>
      <CfTreeTable data={data} columns={columns} defaultExpandedKeys={['0', '0.1']} />
    </>
  );
}

import { CfTreeTable } from '@chufix-design/react';

export default function Demo() {

  const data= [
    {
      name: 'src',
      size: '—',
      modified: '今天 09:14',
      children: [
        { name: 'index.ts', size: '2.1 KB', modified: '今天 09:12' },
        {
          name: 'components',
          size: '—',
          modified: '昨天',
          children: [
            { name: 'Button.vue', size: '4.4 KB', modified: '昨天' },
            { name: 'Input.vue',  size: '6.2 KB', modified: '昨天' },
          ],
        },
      ],
    },
    {
      name: 'docs',
      size: '—',
      modified: '2 天前',
      children: [
        { name: 'README.md', size: '1.8 KB', modified: '2 天前' },
      ],
    },
  ];

  const columns= [
    { key: 'name',     label: '名称' },
    { key: 'size',     label: '大小',     align: 'right', width: 100 },
    { key: 'modified', label: '修改时间', width: 140 },
  ];
  return (
    <>
      <CfTreeTable data={data} columns={columns} defaultExpandedKeys={['0', '0.1']} />
    </>
  );
}

与 CfTable / CfTreeView 的区别

CfTable：扁平数据，无树形展开
CfTreeView：单列树形（文件树 / 大纲），无多列
CfTreeTable：多列 + 树形展开（资源管理器、组织架构、文件浏览器、嵌套报表）

API

属性	类型	默认	说明
`data`	`T[]`	`—`	嵌套数据数组
`columns`	`TreeTableColumn<T>[]`	`—`	列定义
`childrenKey`	`string`	`'children'`	子节点字段名
`defaultExpandedKeys`	`string[]`	`[]`	初始展开行的 id（默认 id = 路径如 `'0.1'`）
`rowKey`	`(row, path) => string`	路径 join	自定义行 id
`indentSize`	`number`	`16`	每层缩进（px）
`striped`	`boolean`	`true`	行斑马纹
`size`	`'sm' \| 'md'`	`'md'`	行高

Events

Vue	React	payload
`row-click`	`onRowClick`	`(row, flat)`
`expand`	`onExpand`	`(id, expanded)`