从扁平到立体：掌握 TinyVue Grid 树形表格的高级实战指南

在大中型企业级 B端系统中，我们常常需要展示具有层级关系的数据，比如组织架构、企业资产分类、或者是复杂的物料清单（BOM）。普通的平铺表格在面对这类多维结构时显得力不从心，而**树形表格（Tree Grid）**则是解决这类痛点的利器。

作为一款优秀的企业级前端组件库，OpenTiny 的 TinyVue 提供了一个功能极其强大、设计考究的表格组件 ------ TinyVue Grid。本文将带大家深入 TinyVue Grid 的树表世界，从基础配置到高级交互，为你解锁树形表格的高效开发姿势。

一、树形表格的"极简起步"

要在 TinyVue Grid 中展示树形数据，核心只需要两步：

在 <tiny-grid> 标签上配置 tree-config 属性。
在需要展示折叠/展开图标的列上，声明 tree-node 属性。

基础代码示例

html 复制代码

<template>
  <tiny-grid :data="tableData" :tree-config="treeConfig">
    <tiny-grid-column type="index" width="60"></tiny-grid-column>
    <!-- tree-node 属性标记该列为树表控制列 -->
    <tiny-grid-column field="name" title="名称" tree-node></tiny-grid-column>
    <tiny-grid-column field="area" title="区域"></tiny-grid-column>
    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
  </tiny-grid>
</template>

<script setup>
import { ref } from 'vue'
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'

// 声明树形子节点的 key 为 'children'
const treeConfig = ref({
  children: 'children'
})

const tableData = ref([
  {
    id: '1',
    name: '华东总部',
    area: '上海',
    employees: 1200,
    children: [
      { id: '1-1', name: '研发一部', area: '上海', employees: 500 },
      { id: '1-2', name: '市场部', area: '南京', employees: 700 }
    ]
  },
  {
    id: '2',
    name: '华南总部',
    area: '深圳',
    employees: 800,
    children: [
      { id: '2-1', name: '研发二部', area: '深圳', employees: 400 },
      { id: '2-2', name: '销售部', area: '广州', employees: 400 }
    ]
  }
])
</script>

在上面的代码中，通过 :tree-config="{ children: 'children' }" 告诉 Grid 哪个字段代表子节点，并在名称列上添加 tree-node，我们便获得了一个带有流畅展开收起动画的树形表格。

二、降维打击：扁平数据结构的"零门槛"转换

在实际的业务开发中，后端经常会因为数据库存储格式，直接返回给我们一维的扁平化数据 （含有 id 和 parentId ），而不是嵌套的树形结构。

很多开发者会选择自己手写递归算法来进行数据格式化。其实，TinyVue 早就帮我们考虑到了这一点！TinyVue 提供了自带的工具方法，通过调用 aggregateTableData 方法，你可以将扁平数据一键转换。

扁平数据转换实战

javascript 复制代码

import { Grid } from '@opentiny/vue'

// 假设从后端获取到的扁平数据
const flatData = [
  { id: '1', parentId: null, name: '华东总部', area: '上海' },
  { id: '1-1', parentId: '1', name: '研发一部', area: '上海' },
  { id: '1-2', parentId: '1', name: '市场部', area: '南京' }
]

// 使用 TinyVue Grid 内部提供的工具方法直接转换
const treeData = Grid.aggregateTableData(flatData, {
  key: 'id',
  parentKey: 'parentId',
  children: 'children'
})

通过 aggregateTableData，我们不需要引入额外的第三方工具库，就能优雅地完成数据结构的转换，保持了代码的清爽与高效。

三、深度联动：选择与关联

树形表格中的多选（Checkbox）经常会面临父子节点的状态关联问题：

勾选父节点时，是否自动勾选其下的所有子节点？
子节点全部勾选时，父节点是否应该处于勾选状态？

TinyVue Grid 通过在 selectConfig 属性中配置 checkField 来与行内的布尔值字段进行绑定，从而实现极度舒适的父子关联勾选效果。

html 复制代码

<template>
  <tiny-grid :data="tableData" :tree-config="treeConfig" :select-config="selectConfig">
    <!-- 引入复选框操作列 -->
    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
    <tiny-grid-column field="name" title="名称" tree-node></tiny-grid-column>
    <tiny-grid-column field="area" title="区域"></tiny-grid-column>
  </tiny-grid>
</template>

<script setup>
import { ref } from 'vue'

const treeConfig = ref({ children: 'children' })
const selectConfig = ref({
  checkField: 'checked' // 关联每一行数据的 checked 属性
})
</script>

当父子关联时，如果父行初始设置为选中，只要确保它的所有子行也同步设置为选中状态，TinyVue Grid 就能智能地维护这种联动关系。

四、键盘侠的福音：高效的键盘导航

在数据录入频繁的场景中，鼠标频繁点击折叠图标会严重降低工作效率。TinyVue Grid 树形表格天然支持键盘操作。

只需在 keyboard-config 中开启方向键支持：

javascript 复制代码

const keyboardConfig = ref({
  isArrow: true // 开启键盘方向键支持
})

此时，用户无需鼠标，仅凭键盘即可纵横表格：

方向键 Up / Down：在高亮行之间上下移动。
Enter：展开当前节点，或进入其子节点。
Backspace：收起当前节点，并返回其父节点。

这种流畅的无障碍体验，在专业级财务系统或物料管理系统的开发中，往往是极佳的加分项。

五、树表增删改的"避坑指南"

由于树形数据结构的嵌套特殊性，在进行"增删改"操作时，我们不能直接使用常规表格的 getInsertRecords 或 getRecordset 方法来获取新增数据。

$!WARNING$ TinyVue Grid 的 getInsertRecords 与 getRecordset 对树形表格的新增记录不生效，此类变动需要开发者根据具体的业务逻辑进行手动处理。

六、总结

TinyVue Grid 的树形表格组件不仅仅是一个"能折叠的表格"，它在数据转换、选择联动、键盘导航、自定义图标等方面都做了深度打磨，能够完美应对各种复杂的 B端层级展示需求。

如果你正在寻找一款能够支撑大数量、高交互的企业级 Vue 树表组件，不妨给 OpenTiny 一个机会，它一定会带给你超出预期的体验！

欢迎在评论区分享你在开发树形表格时踩过的坑和心得！

从扁平到立体：掌握 TinyVue Grid 树形表格的高级实战指南