当前位置：首页 > VUE

vue实现分级标签

2026-01-19 22:33:17VUE

Vue 实现分级标签的方法

分级标签通常用于展示层级关系的数据，如分类目录、组织架构等。以下是几种常见的实现方式：

递归组件实现

适用于嵌套层级不确定的数据结构，通过组件自调用实现无限层级。

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

<script>
export default {
  components: {
    TreeNode: {
      name: 'TreeNode',
      props: ['node'],
      template: `
        <div>
          <div>{{ node.label }}</div>
          <div v-if="node.children" style="margin-left: 20px">
            <tree-node v-for="child in node.children" :node="child" :key="child.id"></tree-node>
          </div>
        </div>
      `
    }
  },
  data() {
    return {
      treeData: {
        id: 1,
        label: 'Root',
        children: [
          {
            id: 2,
            label: 'Child 1',
            children: [
              { id: 3, label: 'Grandchild 1' }
            ]
          }
        ]
      }
    }
  }
}
</script>

动态渲染实现

适用于已知最大层级的情况，通过循环动态渲染不同层级。

<template>
  <div v-for="(level1, index1) in tagData" :key="index1">
    <div class="level1">{{ level1.label }}</div>
    <div v-for="(level2, index2) in level1.children" :key="index2" class="level2">
      <div>{{ level2.label }}</div>
      <div v-for="(level3, index3) in level2.children" :key="index3" class="level3">
        {{ level3.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tagData: [
        {
          label: 'Level 1',
          children: [
            {
              label: 'Level 2',
              children: [
                { label: 'Level 3' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

<style>
.level1 { font-weight: bold; }
.level2 { margin-left: 20px; }
.level3 { margin-left: 40px; }
</style>

第三方组件库实现

使用现成的UI组件库可以快速实现分级标签功能：

Element UI Tree组件：

<template>
  <el-tree :data="treeData" :props="defaultProps"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: 'Level 1',
        children: [{
          label: 'Level 2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>

Ant Design Vue Tree组件：

<template>
  <a-tree :tree-data="treeData" />
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Level 1',
          key: '1',
          children: [
            { title: 'Level 2', key: '2' }
          ]
        }
      ]
    }
  }
}
</script>

交互功能增强

为分级标签添加展开/折叠功能：

<template>
  <div>
    <div v-for="item in tagData" :key="item.id" class="tag-item">
      <div @click="toggleExpand(item)">
        {{ item.label }}
        <span v-if="item.children">{{ item.expanded ? '[-]' : '[+]' }}</span>
      </div>
      <div v-if="item.expanded && item.children" class="children">
        <tag-item :tag-data="item.children"></tag-item>
      </div>
    </div>
  </div>
</template>

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

<style>
.tag-item { margin-bottom: 5px; }
.children { margin-left: 20px; }
</style>

以上方法可根据实际需求选择使用，递归组件适合动态层级，动态渲染适合固定层级，第三方组件库则提供开箱即用的解决方案。

vue实现分级标签