Compare Datatable & Tree-Grid + Hierarchical Tables

同学们，今天我们来聊聊 Lightning Web Components 里面两个重要的展示组件：datatable 和树网格，也就是 tree grid。其实它们就像是表格的不同形态，各有各的擅长场景。 先说 datatable，它的强项在于很有交互感——支持排序、内联编辑，还有无限滚动，处理大量数据时用户不用翻页，一直往下滑就能加载更多。而树网格呢，它是专门用来展示有层级关系的数据的，比如带父记录和子记录的情况，每一行都可以展开，看到下一层的子数据，层次很清晰。 虽然场景不同，但它们也有一些共同的功能：都支持自定义数据类型，你可以自定义每一列显示成什么样子；都支持行操作，比如点击按钮触发动作；都能让用户调整列宽、勾选行，还可以显示行号。不过要注意一下，这两个组件目前都还不支持移动端的交互，所以在手机上使用时体验有限，这是它们共有的小遗憾。 那重点来了，如果想用树网格展示分层数据，该怎么处理数据呢？关键就在每一行的数据里加一个 `_children` 键。在 Apex 控制器那边，你可以用 SOQL 的子查询直接拿到当前记录的所有子记录；在 JavaScript 里，拿到数据后，要把这些子记录映射到父记录的 `_children` 字段里。这样树网格就能自动识别谁是父、谁是子了，一层层展开。 说到行操作，比如在行上放一个“编辑”按钮，点击后可以导航到这条记录的详情页面。这时候我们可以借助 `NavigationMixin` 来实现跳转，代码写起来也很简单。 最后记住，树网格这个组件本身需要接收几个重要属性：`columns` 定义列，`data` 传入处理好的数据，`key-field` 告诉组件每行唯一的标识字段，还有 `onrowaction` 用来监听行操作事件。把这几样东西配好，一个带层级展开的表格就出来了。 好了，关于 datatable 和树网格的功能对比，以及分层数据的处理方式，我们就先讲到这里。大家可以在练习中试着把父子关系数据拼成 `_children` 的结构，感受一下树网格的妙用。