vue实现treetable

Vue 实现 TreeTable 的方法

使用现成组件库

Element UI、Ant Design Vue 等流行 UI 库都提供了成熟的 TreeTable 组件，可以直接引入使用。

安装 Element UI：

npm install element-ui

基础用法示例：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        children: [{
          id: 11,
          date: '2016-05-01',
          name: '王小明'
        }]
      }]
    }
  }
}
</script>

自定义递归组件实现

如果需要完全自定义的 TreeTable，可以创建递归组件：

1. 创建 TreeTable 组件：

   
   <template>
   <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.prop">{{ col.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tree-node 
        v-for="node in data"
        :key="node.id"
        :node="node"
        :columns="columns"
        :level="0"
      />
    </tbody>
   </table>
   </template>

import TreeNode from './TreeNode.vue'

export default { components: { TreeNode }, props: { data: Array, columns: Array } }

```

1. 创建 TreeNode 递归组件：

   
   <template>
   <tr :style="{'padding-left': `${level * 20}px`}">
    <td v-for="col in columns" :key="col.prop">
      {{ node[col.prop] }}
    </td>
   </tr>
   <template v-if="node.children && node.children.length">
    <tree-node
      v-for="child in node.children"
      :key="child.id"
      :node="child"
      :columns="columns"
      :level="level + 1"
    />
   </template>
   </template>

export default { name: 'TreeNode', props: { node: Object, columns: Array, level: Number } } ```

使用第三方专用库

vue-treetable 是专门为 Vue 设计的 TreeTable 库：

安装：

npm install vue-treetable

使用示例：

<template>
  <treetable
    :data="treeData"
    :columns="columns"
    :options="options"
  />
</template>

<script>
import Treetable from 'vue-treetable'

export default {
  components: { Treetable },
  data() {
    return {
      treeData: [...],
      columns: [
        { label: 'Name', field: 'name' },
        { label: 'Size', field: 'size' }
      ],
      options: {
        showCheckbox: true,
        expandAll: false
      }
    }
  }
}
</script>

实现展开/折叠功能

在自定义实现中添加展开折叠功能：

<template>
  <tr>
    <td @click="toggle">
      <span v-if="hasChildren">{{ isOpen ? '-' : '+' }}</span>
      {{ node.name }}
    </td>
  </tr>
  <tr v-if="isOpen && hasChildren">
    <td :colspan="columns.length">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :columns="columns"
      />
    </td>
  </tr>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length
    }
  },
  methods: {
    toggle() {
      if (this.hasChildren) {
        this.isOpen = !this.isOpen
      }
    }
  }
}
</script>

性能优化建议

对于大型树形数据，建议：

• 使用虚拟滚动技术
• 实现懒加载子节点
• 避免深层嵌套的响应式数据
• 对静态数据使用 Object.freeze()

虚拟滚动示例：

<template>
  <virtual-list :size="40" :remain="20">
    <tree-node v-for="item in visibleNodes" :key="item.id" :node="item"/>
  </virtual-list>
</template>