vue 实现目录树

Vue 实现目录树的方法

使用递归组件实现树形结构

递归组件是Vue中实现树形结构的常见方法。通过组件调用自身的方式，可以轻松构建多级目录树。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <tree-node v-if="item.children" :treeData="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

使用第三方组件库

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

• Element UI的el-tree
• Vuetify的v-treeview
• Vue Draggable的树形组件

以Element UI为例：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '一级目录',
        children: [{
          label: '二级目录'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

实现可拖拽的目录树

结合vue-draggable可以创建可拖拽排序的树形结构：

<template>
  <draggable 
    v-model="treeData" 
    group="tree" 
    @end="onDragEnd">
    <div v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <tree-node 
        v-if="item.children" 
        :treeData="item.children"/>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  props: ['treeData'],
  methods: {
    onDragEnd() {
      // 处理拖拽结束逻辑
    }
  }
}
</script>

添加展开/折叠功能

为目录树添加交互功能：

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      <span @click="toggleExpand(item)">
        {{ item.expanded ? '▼' : '▶' }} {{ item.name }}
      </span>
      <tree-node 
        v-if="item.children && item.expanded" 
        :treeData="item.children"/>
    </li>
  </ul>
</template>

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

样式优化

为目录树添加基础样式：

ul {
  list-style: none;
  padding-left: 20px;
}

li {
  cursor: pointer;
  padding: 5px 0;
}

li span:hover {
  background-color: #f5f5f5;
}

以上方法可以根据实际需求组合使用，构建功能完善、交互友好的Vue目录树组件。