vue实现 treegrid

Vue 实现 TreeGrid 的方法

使用现成组件库

Element UI、Ant Design Vue 等流行组件库提供了现成的 TreeTable/TreeGrid 组件，可直接使用。

Element UI 示例：

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

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        hasChildren: true
      }]
    }
  },
  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: '王小虎'
          }
        ])
      }, 1000)
    }
  }
}
</script>

自定义递归组件实现

创建递归组件展示树形结构：

<template>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>值</th>
      </tr>
    </thead>
    <tbody>
      <tree-row 
        v-for="item in treeData" 
        :key="item.id" 
        :item="item"
        :level="0"/>
    </tbody>
  </table>
</template>

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

export default {
  components: { TreeRow },
  data() {
    return {
      treeData: [
        { id: 1, name: '节点1', value: 100, children: [...] }
      ]
    }
  }
}
</script>

TreeRow.vue 组件：

<template>
  <tr>
    <td :style="{ paddingLeft: level * 20 + 'px' }">
      {{ item.name }}
    </td>
    <td>{{ item.value }}</td>
  </tr>
  <tree-row 
    v-if="item.children"
    v-for="child in item.children"
    :key="child.id"
    :item="child"
    :level="level + 1"/>
</template>

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

使用第三方 TreeGrid 库

vue-table-with-tree-grid 是专为 Vue 设计的树形表格组件：

安装：

npm install vue-table-with-tree-grid

使用示例：

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

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

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

实现关键功能

展开/折叠功能可通过维护 expandedIds 状态实现：

data() {
  return {
    expandedIds: new Set()
  }
},
methods: {
  toggleExpand(id) {
    if (this.expandedIds.has(id)) {
      this.expandedIds.delete(id)
    } else {
      this.expandedIds.add(id)
    }
  }
}

性能优化建议

大数据量时考虑虚拟滚动技术，可使用 vue-virtual-scroller 等库实现：

<template>
  <RecycleScroller
    :items="flattenedData"
    :item-size="50"
    key-field="id">
    <template v-slot="{ item }">
      <div :style="{ paddingLeft: item.level * 20 + 'px' }">
        {{ item.name }}
      </div>
    </template>
  </RecycleScroller>
</template>