vue实现树形标题

Vue 实现树形标题的方法

在 Vue 中实现树形标题通常需要结合递归组件和动态数据渲染。以下是几种常见的实现方式：

使用递归组件

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

<template>
  <div>
    <tree-node :node="treeData" @select="handleSelect"></tree-node>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue';

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: {
        title: 'Root',
        children: [
          {
            title: 'Child 1',
            children: [
              { title: 'Grandchild 1' },
              { title: 'Grandchild 2' }
            ]
          },
          {
            title: 'Child 2'
          }
        ]
      }
    };
  },
  methods: {
    handleSelect(node) {
      console.log('Selected node:', node.title);
    }
  }
};
</script>

TreeNode 组件实现

TreeNode 组件负责递归渲染树形结构。

<template>
  <div class="tree-node">
    <div @click="toggle" class="node-title">
      {{ node.title }}
      <span v-if="hasChildren">{{ isOpen ? '-' : '+' }}</span>
    </div>
    <div v-if="isOpen && hasChildren" class="children">
      <tree-node
        v-for="child in node.children"
        :key="child.title"
        :node="child"
        @select="$emit('select', child)"
      ></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length;
    }
  },
  methods: {
    toggle() {
      if (this.hasChildren) {
        this.isOpen = !this.isOpen;
      }
      this.$emit('select', this.node);
    }
  }
};
</script>

<style>
.tree-node {
  margin-left: 20px;
}
.node-title {
  cursor: pointer;
  padding: 5px;
}
.children {
  margin-left: 15px;
}
</style>

使用第三方库

对于更复杂的树形结构需求，可以使用成熟的第三方库如 vue-tree-halower 或 element-ui 的树形组件。

安装 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: 'Level 1',
          children: [
            {
              label: 'Level 2',
              children: [
                { label: 'Level 3' }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

动态加载数据

对于大型树形结构，可以实现动态加载数据以提高性能。

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

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      }
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ label: 'Root' }]);
      }
      if (node.level > 3) {
        return resolve([]);
      }
      setTimeout(() => {
        const data = Array.from({ length: 2 }).map((_, index) => ({
          label: `Child ${node.level}-${index}`,
          leaf: node.level >= 3
        }));
        resolve(data);
      }, 500);
    }
  }
};
</script>

自定义样式和交互

可以通过 CSS 和事件处理来自定义树形标题的外观和行为。

<template>
  <div class="custom-tree">
    <tree-node
      v-for="node in treeData"
      :key="node.id"
      :node="node"
      @toggle="handleToggle"
      @select="handleSelect"
    ></tree-node>
  </div>
</template>

<style>
.custom-tree .node-title {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 4px;
}
.custom-tree .node-title:hover {
  background-color: #e0e0e0;
}
</style>

以上方法提供了在 Vue 中实现树形标题的多种选择，从简单的递归组件到使用第三方库，可以根据项目需求选择最适合的方案。