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

elementui treegrid

2026-01-13 21:24:24前端教程

ElementUI TreeGrid 实现方法

ElementUI 本身并未直接提供 TreeGrid 组件，但可以通过组合 Tree 和 Table 组件或使用第三方扩展库实现类似功能。以下是几种实现方案：

使用 el-table 和 el-tree 组合

通过自定义表格列和树形结构结合实现 TreeGrid 效果。需要手动处理树形数据的展开/折叠逻辑。

<template>
  <el-table :data="tableData" row-key="id">
    <el-table-column prop="name" label="名称">
      <template #default="{ row }">
        <span @click="toggleExpand(row)" style="cursor: pointer">
          {{ row.expand ? '▼' : '►' }} {{ row.name }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="value" label="值"/>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '父节点', value: '100', expand: false, children: [...] }
      ]
    }
  },
  methods: {
    toggleExpand(row) {
      row.expand = !row.expand
    }
  }
}
</script>

使用第三方库 vue-table-with-tree-grid

这是一个基于 ElementUI 的 TreeGrid 扩展组件，提供开箱即用的树形表格功能。

安装依赖：

npm install vue-table-with-tree-grid

使用示例：

<template>
  <tree-table :data="treeData" :columns="columns"/>
</template>

<script>
import TreeTable from 'vue-table-with-tree-grid'

export default {
  components: { TreeTable },
  data() {
    return {
      columns: [
        { label: '名称', prop: 'name' },
        { label: '值', prop: 'value' }
      ],
      treeData: [
        {
          name: '父节点',
          value: '100',
          children: [...]
        }
      ]
    }
  }
}
</script>

自定义 TreeGrid 组件

对于更复杂的需求，可以创建自定义组件结合 el-table 和递归组件实现：

<template>
  <el-table :data="flattenData">
    <el-table-column v-for="col in columns" :key="col.prop" v-bind="col"/>
  </el-table>
</template>

<script>
export default {
  props: ['treeData', 'columns'],
  computed: {
    flattenData() {
      // 实现树形数据扁平化逻辑
      return this.flattenTree(this.treeData)
    }
  },
  methods: {
    flattenTree(nodes, level = 0, result = []) {
      nodes.forEach(node => {
        result.push({ ...node, level })
        if (node.children && node.expand) {
          this.flattenTree(node.children, level + 1, result)
        }
      })
      return result
    }
  }
}
</script>

样式调整建议

实现 TreeGrid 时需要特别注意样式处理，确保树形结构的缩进和展开图标清晰可见：

.el-table .tree-node {
  padding-left: 20px;
  position: relative;
}

.el-table .tree-indent {
  display: inline-block;
  width: 16px;
}

.el-table .tree-expand {
  cursor: pointer;
  margin-right: 5px;
}