el-table 支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。
支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。
children 与 hasChildren 都可以通过 tree-props 配置。

上面是 ElementUI 官方对树形数据表格的介绍。实际使用时发现**无效**,需注意一下几点:

  1. 对象数组 data 中必须包含 children 子节点,如果不是 children 可以通过 tree-props 定义
  2. row-key 一般指向 data 中的 id 属性,该属性不能为 null 或 undefined 等,你也可以指定为其他属性,比如 menu_id,但同样不能为 null 或 undefined 等,且需要唯一。
  3. 如果未启用懒加载,data 数据中不可添加 hasChildren 属性,否则不会显示下拉箭头并不会显示子项目
  4. 懒加载方式必须指定 lazy 及 load 函数,否则点击下拉按钮不起作用
  5. 如果不希望指定列显示下拉箭头,设置该列 <code>el-table-column</code> 属性为 type=””

推荐的数据结构

// 非懒加载方式
{
  id: 唯一值,
  children: [子节点数组],
  // 其他数据项目
}

// 懒加载方式
{
  id: 唯一值,
  children: [子节点数组],
  hasChildren: true,
  // 其他数据项目
}

注意:如发现问题,建议使用官网的数据测试,调整 id, children, hasChildren 的值观察效果以排查解决问题。