Element Plus Table 组件树形渲染实现方法

阿智@112024-12-13 9:31

Element Plus的Table组件通过指定列表数据的children属性，实现树形数据的渲染；同时使用row-key标识唯一的行，依赖排序和子节点数据结构，以实现连动操作。

重要的设置有：

树形渲染配置项：通过tree-props 配置定义树形数据结构，例如指定子节点属性名为children。
唯一key设置：通过row-key 解决树形数据表的唯一标识问题。
- 如果数据是懒加载的tree-props中才需要hasChildren属性，非懒加载不用加，加了无法渲染树形结构

bash 复制代码

<el-table
    :data="tableData"
    row-key="id"
    border
    style="width: 100%"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" />
  </el-table>

父级别显示序号而子级不显示序号的效果，可以在 el-table-column 中通过一个简单的逻辑判断来控制：

在序号列的插槽中判断是否为父级。
父级可以通过没有 children 属性或特定条件来标识。

bash 复制代码

<el-table-column label="No." width="100">
      <template #default="{ row, $index }">
        <span v-if="!row.children">{{ $index + 1 }}</span>
      </template>
 </el-table-column>