同列结构el-table基于tree-props实现行展开功能的问题咨询

1 基础配置要求 #

你配置的tree-props属性本身符合规范，渲染失败大多是缺失必填属性导致：

• 必须添加row-key属性，绑定行数据中的唯一标识字段，你的场景中可直接绑定为id字段：

  row-key="id"
  

  树形表格需要通过唯一key区分每一行，缺少该属性会导致树形结构渲染异常。
• 如果你是提前把父子数据一次性组装到同一数组，hasChildren可以省略，只要父行数据中children数组不为空时会自动展示展开按钮。仅在懒加载异步获取子数据的场景才需要配置hasChildren和lazy属性。

2 数据结构适配规则 #

你提到父行和子行数据结构完全一致，仅id不同，只需要将对应子行数据存入父行的children字段下即可，示例数据结构如下：

const tableData = [
  {
    id: 1,
    name: '父级数据1',
    // 其他业务字段
    children: [
      {
        id: 101,
        name: '子级数据1-1',
        // 和父行字段完全一致，无需额外特殊字段
      },
      {
        id: 102,
        name: '子级数据1-2',
      }
    ]
  },
  {
    id: 2,
    name: '父级数据2',
    // 无children字段时不会展示展开按钮
  }
]

3 完整示例代码 #

3.1 非懒加载（全量数据提前组装）场景 #

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{ children: 'children' }"
    border
    style="width: 100%"
  >
    <!-- 列配置和普通el-table完全一致，无需额外调整
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="amount" label="金额" />
    <el-table-column prop="date" label="创建日期" />
  </el-table>
</template>

如果需要默认展开所有行，添加default-expand-all属性即可；如果需要控制指定行展开，绑定expand-row-keys属性传入需要展开的行id数组即可。

3.2 懒加载（异步获取子数据）场景 #

如果需要点击展开时才加载子行数据，配置如下：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    lazy
    :load="loadChildData"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <!-- 列配置同上 -->
  </el-table>
</template>
<script>
export default {
  methods: {
    // 加载子行数据的方法
    loadChildData(row, treeNode, resolve) {
      // 调用接口获取当前行对应的子数据
      getChildApi(row.id).then(res => {
        resolve(res.data)
      })
    }
  }
}
</script>

对应父行数据中添加hasChildren: true时会展示展开按钮，点击时触发load方法加载子数据。

效果参考 #

内容的提问来源于stack exchange，提问作者Prashant Mahajan