当前位置：首页 > VUE

vue实现树形导航

2026-01-16 20:10:04VUE

Vue 实现树形导航的方法

递归组件实现树形结构

使用 Vue 的递归组件特性可以轻松实现树形导航。定义一个组件，该组件在其模板中调用自身，适用于嵌套数据。

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

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

使用第三方库

对于更复杂的需求，可以使用现成的 Vue 树形组件库，如 vue-tree-halower 或 element-ui 的树形控件。

vue实现树形导航

安装 element-ui 后，直接使用其树形组件：

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

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

动态加载节点数据

对于大型树形结构，可以采用动态加载方式优化性能，只在展开节点时加载其子节点数据。

vue实现树形导航

<el-tree
  :props="props"
  :load="loadNode"
  lazy>
</el-tree>

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '根节点' }])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        resolve([
          { name: '子节点1', leaf: true },
          { name: '子节点2' }
        ])
      }, 500)
    }
  }
}
</script>

自定义节点内容

通过 scoped slot 可以完全自定义树形导航中每个节点的渲染内容，实现图标、按钮等复杂 UI。

<el-tree
  :data="data"
  :props="defaultProps">
  <span slot-scope="{ node, data }" class="custom-tree-node">
    <span>{{ node.label }}</span>
    <span>
      <el-button @click="append(data)">添加</el-button>
    </span>
  </span>
</el-tree>

状态管理

对于需要全局状态管理的树形导航，可以将树形数据存储在 Vuex 中，通过 mutations 和 actions 来更新树形结构。

// store.js
const store = new Vuex.Store({
  state: {
    treeData: []
  },
  mutations: {
    updateTreeData(state, payload) {
      state.treeData = payload
    }
  },
  actions: {
    fetchTreeData({ commit }) {
      api.getTreeData().then(res => {
        commit('updateTreeData', res.data)
      })
    }
  }
})

标签: vue