vue实现树形结构菜单

Vue实现树形结构菜单的方法

使用递归组件实现树形菜单

递归组件是Vue中实现树形结构的常见方法。通过组件调用自身，可以动态渲染无限层级的树形数据。

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

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

使用第三方库vue-tree-halower

对于更复杂的需求，可以使用专门为Vue设计的树形组件库。

安装依赖：

npm install vue-tree-halower

使用示例：

<template>
  <tree
    :data="treeData"
    :options="treeOptions"
    @node:selected="onNodeSelected"
  />
</template>

<script>
import { Tree } from 'vue-tree-halower'

export default {
  components: { Tree },
  data() {
    return {
      treeData: [...],
      treeOptions: {
        checkbox: true,
        dragAndDrop: true
      }
    }
  },
  methods: {
    onNodeSelected(node) {
      console.log('Selected node:', node)
    }
  }
}
</script>

动态加载子节点

对于大数据量的树形结构，可以采用动态加载方式优化性能。

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

<script>
export default {
  props: {
    treeData: Array
  },
  data() {
    return {
      visibleData: this.treeData.map(item => ({
        ...item,
        expanded: false
      }))
    }
  },
  methods: {
    toggleExpand(item) {
      item.expanded = !item.expanded
      if (item.expanded && !item.children) {
        this.loadChildren(item)
      }
    },
    async loadChildren(item) {
      const children = await fetchChildren(item.id)
      item.children = children
    }
  }
}
</script>

添加样式和交互效果

为树形菜单添加基本样式和交互效果可以提升用户体验。

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

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

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

处理树形数据格式

确保数据格式符合树形结构要求，通常包含id、name和children字段。

const treeData = [
  {
    id: 1,
    name: 'Parent 1',
    children: [
      {
        id: 2,
        name: 'Child 1',
        children: [...]
      },
      {
        id: 3,
        name: 'Child 2'
      }
    ]
  },
  {
    id: 4,
    name: 'Parent 2'
  }
]

实现搜索过滤功能

为树形菜单添加搜索功能可以快速定位节点。

<template>
  <input v-model="searchText" placeholder="Search...">
  <tree-menu :treeData="filteredTree"></tree-menu>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      originalTree: [...]
    }
  },
  computed: {
    filteredTree() {
      if (!this.searchText) return this.originalTree
      return this.filterNodes(this.originalTree)
    }
  },
  methods: {
    filterNodes(nodes) {
      return nodes.filter(node => {
        const matches = node.name.toLowerCase().includes(this.searchText.toLowerCase())
        if (node.children) {
          node.children = this.filterNodes(node.children)
          return matches || node.children.length > 0
        }
        return matches
      })
    }
  }
}
</script>