当前位置：首页 > VUE

vue实现 treegrid

2026-01-13 04:56:24VUE

在Vue中实现TreeGrid（树形表格）可以通过多种方式完成，以下是一些常见的方法和实现步骤：

使用第三方库

Vue生态中有许多成熟的第三方库可以快速实现TreeGrid功能，例如：

VxeTable：支持树形表格、虚拟滚动、动态加载等功能。

<template>
  <vxe-table
    :data="treeData"
    :tree-config="{ children: 'children' }"
  >
    <vxe-column field="name" title="Name" tree-node></vxe-column>
    <vxe-column field="age" title="Age"></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          name: 'Parent',
          age: 40,
          children: [
            { name: 'Child 1', age: 10 },
            { name: 'Child 2', age: 12 }
          ]
        }
      ]
    }
  }
}
</script>

Element UI的Table组件：通过row-key和tree-props配置实现树形表格。

vue实现 treegrid

<template>
  <el-table
    :data="treeData"
    row-key="id"
    :tree-props="{ children: 'children' }"
  >
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

自定义递归组件

如果需要更灵活的定制，可以通过递归组件实现TreeGrid：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tree-row
        v-for="item in treeData"
        :key="item.id"
        :item="item"
      />
    </tbody>
  </table>
</template>

<script>
import TreeRow from './TreeRow.vue'

export default {
  components: { TreeRow },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'Parent',
          age: 40,
          children: [
            { id: 2, name: 'Child 1', age: 10 },
            { id: 3, name: 'Child 2', age: 12 }
          ]
        }
      ]
    }
  }
}
</script>

在TreeRow.vue中递归渲染子节点：

vue实现 treegrid

<template>
  <tr>
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
  </tr>
  <tr v-if="item.children">
    <td colspan="2">
      <table>
        <tree-row
          v-for="child in item.children"
          :key="child.id"
          :item="child"
        />
      </table>
    </td>
  </tr>
</template>

<script>
export default {
  name: 'TreeRow',
  props: {
    item: Object
  }
}
</script>

动态加载与懒加载

对于大数据量的树形表格，可以通过动态加载优化性能：

<template>
  <vxe-table
    :data="treeData"
    :tree-config="{ lazy: true, loadMethod: loadChildren }"
  >
    <vxe-column field="name" title="Name" tree-node></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { name: 'Parent', id: 1, hasChildren: true }
      ]
    }
  },
  methods: {
    loadChildren({ row }) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([
            { name: 'Child 1', id: 2 },
            { name: 'Child 2', id: 3 }
          ])
        }, 500)
      })
    }
  }
}
</script>

样式与交互优化

通过CSS控制缩进和展开/折叠图标：

.tree-node {
  padding-left: 20px;
  position: relative;
}
.tree-node:before {
  content: '+';
  position: absolute;
  left: 5px;
}
.tree-node.expanded:before {
  content: '-';
}

添加展开/折叠事件：

<template>
  <tr @click="toggleExpand(item)">
    <td>{{ item.name }}</td>
  </tr>
  <tr v-if="item.expanded && item.children">
    <td colspan="2">
      <tree-row v-for="child in item.children" :item="child" />
    </td>
  </tr>
</template>

<script>
export default {
  methods: {
    toggleExpand(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

以上方法可以根据项目需求选择适合的方案，第三方库适合快速开发，而自定义组件则更适合高度定制的场景。