vue 实现树形表格

实现树形表格的基本思路

在Vue中实现树形表格通常需要结合递归组件或第三方库。核心逻辑是将嵌套的树形数据通过递归渲染，并支持展开/折叠操作。

使用递归组件实现

定义一个递归组件，通过v-for循环渲染子节点，并通过v-if或v-show控制子节点的显示隐藏。

<template>
  <table>
    <tbody>
      <tr v-for="node in treeData" :key="node.id">
        <td>
          <span @click="toggleExpand(node)">{{ node.expanded ? '−' : '+' }}</span>
          {{ node.name }}
        </td>
      </tr>
      <tr v-if="node.expanded && node.children">
        <td colspan="100%">
          <tree-table :tree-data="node.children"/>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TreeTable',
  props: ['treeData'],
  methods: {
    toggleExpand(node) {
      node.expanded = !node.expanded;
    }
  }
};
</script>

使用第三方库（如Element UI）

Element UI的el-table组件支持树形表格，通过row-key和tree-props配置实现。

<template>
  <el-table
    :data="treeData"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
</template>

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

数据格式要求

树形表格的数据通常需要嵌套结构，例如：

[
  {
    id: 1,
    name: 'Node 1',
    expanded: false,
    children: [
      {id: 2, name: 'Node 1.1'}
    ]
  }
]

动态加载子节点

对于大数据量场景，可以通过动态加载子节点优化性能。

methods: {
  loadChildren(node, done) {
    // 模拟异步加载
    setTimeout(() => {
      node.children = [
        {id: Math.random(), name: 'New Child'}
      ];
      done();
    }, 500);
  }
}

样式与交互优化

通过CSS控制缩进和展开图标，提升用户体验。

.tree-node {
  padding-left: 20px;
  position: relative;
}
.tree-toggle {
  cursor: pointer;
  position: absolute;
  left: 0;
}

注意事项

• 确保每个节点有唯一标识（如id），避免渲染问题。
• 对于深层嵌套数据，考虑使用虚拟滚动（如vue-virtual-scroller）优化性能。
• 如果需要编辑功能，建议结合v-model或状态管理库（如Vuex）实现数据同步。