vue实现树结构

Vue 实现树结构的方法

递归组件实现树结构

使用递归组件可以轻松实现树形结构的数据展示。定义一个树节点组件，组件内部调用自身实现递归渲染。

<template>
  <div>
    <div @click="toggle">{{ node.name }}</div>
    <div v-if="isOpen" v-for="child in node.children" :key="child.id">
      <tree-node :node="child"></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

使用第三方库

Vue生态中有许多成熟的树形组件库，如vue-tree-list、element-ui的el-tree等。

安装element-ui的树组件：

npm install element-ui

使用示例：

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

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

扁平数据结构转树形结构

当后端返回的是扁平数据结构时，需要先转换为树形结构。

function listToTree(list) {
  const map = {}
  const roots = []

  list.forEach(item => {
    map[item.id] = { ...item, children: [] }
  })

  list.forEach(item => {
    if (item.parentId !== null && map[item.parentId]) {
      map[item.parentId].children.push(map[item.id])
    } else {
      roots.push(map[item.id])
    }
  })

  return roots
}

动态加载树节点

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

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

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

      setTimeout(() => {
        const data = [{
          name: '子节点' + node.level,
          leaf: node.level >= 2
        }]
        resolve(data)
      }, 500)
    }
  }
}
</script>

树结构的样式优化

为树节点添加自定义样式和交互效果。

<template>
  <ul class="tree">
    <li v-for="node in treeData" :key="node.id">
      <div 
        class="tree-node" 
        :class="{ 'is-open': node.isOpen }"
        @click="toggleNode(node)"
      >
        {{ node.label }}
      </div>
      <tree v-if="node.children && node.isOpen" :treeData="node.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    treeData: Array
  },
  methods: {
    toggleNode(node) {
      node.isOpen = !node.isOpen
    }
  }
}
</script>

<style>
.tree-node {
  cursor: pointer;
  padding: 5px;
}
.tree-node:hover {
  background-color: #f5f5f5;
}
.is-open {
  font-weight: bold;
}
</style>

这些方法涵盖了Vue中实现树结构的主要技术方案，可以根据项目需求选择合适的实现方式。递归组件适合自定义程度高的场景，第三方库能快速实现功能，动态加载适用于大数据量情况。