当前位置：首页 > 前端教程

elementui treetable

2026-03-06 06:00:05前端教程

ElementUI TreeTable 的使用方法

ElementUI 本身并未直接提供 TreeTable 组件，但可以通过结合 el-table 和 el-tree 的功能实现类似效果。

实现 TreeTable 的基本思路

使用 el-table 的 row-key 和 tree-props 属性来展示树形数据
数据格式需要包含 children 字段来表示层级关系

代码示例

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        children: [{
          id: 11,
          date: '2016-05-01',
          name: '王小小',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }]
    }
  }
}
</script>

自定义展开/折叠图标

可以通过 expand-row-keys 控制默认展开的行，并使用 scoped slot 自定义展开图标：

<el-table
  :data="tableData"
  row-key="id"
  :tree-props="{children: 'children'}"
  :expand-row-keys="[1]">
  <el-table-column type="expand">
    <template #default="props">
      <span v-if="props.row.children && props.row.children.length">
        <i :class="props.expanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
      </span>
    </template>
  </el-table-column>
  <!-- 其他列 -->
</el-table>

动态加载子节点

对于大数据量情况，可以实现懒加载：

elementui treetable

methods: {
  load(tree, treeNode, resolve) {
    setTimeout(() => {
      resolve([
        {
          id: 31,
          date: '2016-05-01',
          name: '王小小',
          address: '上海市普陀区金沙江路 1519 弄'
        }
      ])
    }, 1000)
  }
}