vue实现表格树

Vue 实现表格树的方法

在 Vue 中实现表格树结构通常需要结合递归组件和动态渲染技术。以下是几种常见的实现方式：

使用递归组件实现树形表格

递归组件是 Vue 实现树形结构的核心方法。通过组件调用自身来渲染嵌套的子节点。

<template>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tree-row v-for="node in treeData" :node="node" :key="node.id"></tree-row>
    </tbody>
  </table>
</template>

<script>
export default {
  components: {
    TreeRow: {
      template: `
        <tr>
          <td>
            <span @click="toggle" style="cursor:pointer">
              {{node.expanded ? '-' : '+'}}
              {{node.name}}
            </span>
          </td>
          <td>
            <button @click="edit(node)">编辑</button>
          </td>
        </tr>
        <tr v-if="node.expanded && node.children">
          <td colspan="2">
            <table>
              <tree-row 
                v-for="child in node.children" 
                :node="child" 
                :key="child.id">
              </tree-row>
            </table>
          </td>
        </tr>
      `,
      props: ['node'],
      methods: {
        toggle() {
          this.node.expanded = !this.node.expanded
        },
        edit(node) {
          // 编辑逻辑
        }
      }
    }
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '父节点1',
          expanded: false,
          children: [
            {id: 11, name: '子节点1'},
            {id: 12, name: '子节点2'}
          ]
        }
      ]
    }
  }
}
</script>

使用第三方组件库

对于更复杂的树形表格需求，可以使用现成的 Vue 组件库：

1. Element UI 的 el-table 结合树形数据

   <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>

2. VxeTable 的树形表格功能

   <vxe-table
   :tree-config="{children: 'children'}"
   :data="tableData">
   <vxe-column type="seq" title="序号" width="60"></vxe-column>
   <vxe-column field="name" title="名称" tree-node></vxe-column>
   </vxe-table>

动态加载子节点

对于大数据量的树形表格，可以采用动态加载子节点的方式优化性能：

methods: {
  loadChildren(row, treeNode, resolve) {
    axios.get(`/api/nodes/${row.id}/children`).then(res => {
      resolve(res.data)
    })
  }
}

样式优化技巧

1. 使用缩进表示层级关系

   .tree-node {
   padding-left: calc(var(--level) * 20px);
   }

2. 添加展开/折叠图标

   <span 
   class="toggle-icon" 
   :class="{'expanded': node.expanded}"
   @click="toggleExpand(node)">
   </span>

3. 添加行高亮效果

   

   tr:hover {
   background-color: #f5f7fa;
   }

性能优化建议

1. 对于大型树形数据，使用虚拟滚动技术
2. 实现懒加载子节点，初始只加载可见部分
3. 使用 v-once 对静态内容进行缓存
4. 合理使用 key 属性帮助 Vue 识别节点

以上方法可以根据实际项目需求进行组合和调整，实现功能完善且性能良好的树形表格。