vue实现树形结构单选

Vue 实现树形结构单选

在 Vue 中实现树形结构的单选功能，可以通过递归组件和状态管理来完成。以下是具体实现方法：

数据结构设计

树形结构的数据通常是一个嵌套的对象数组，每个节点包含 id、label、children 等属性。例如：

const treeData = [
  {
    id: 1,
    label: '节点1',
    children: [
      { id: 2, label: '子节点1' },
      { id: 3, label: '子节点2' }
    ]
  }
]

递归组件实现

创建一个递归组件 TreeItem，用于渲染树形结构：

<template>
  <div>
    <div 
      @click="selectNode(node)"
      :class="{ 'selected': selectedId === node.id }"
    >
      {{ node.label }}
    </div>
    <div v-if="node.children" class="children">
      <TreeItem 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child"
        :selectedId="selectedId"
        @select="selectNode"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    node: Object,
    selectedId: [Number, String]
  },
  methods: {
    selectNode(node) {
      this.$emit('select', node)
    }
  }
}
</script>

状态管理

在父组件中管理选中的节点 ID，并通过事件传递实现单选逻辑：

<template>
  <div>
    <TreeItem 
      v-for="node in treeData" 
      :key="node.id" 
      :node="node"
      :selectedId="selectedId"
      @select="handleSelect"
    />
  </div>
</template>

<script>
import TreeItem from './TreeItem.vue'

export default {
  components: { TreeItem },
  data() {
    return {
      treeData: [...], // 树形数据
      selectedId: null // 当前选中的节点 ID
    }
  },
  methods: {
    handleSelect(node) {
      this.selectedId = node.id
    }
  }
}
</script>

样式优化

为选中的节点添加高亮样式，提升用户体验：

.selected {
  background-color: #f0f0f0;
  font-weight: bold;
}

.children {
  margin-left: 20px;
}

使用第三方库

如果需要更复杂的功能（如懒加载、搜索等），可以使用现成的树形组件库：

1. Element UI 的 el-tree 组件，通过 highlight-current 属性实现单选：

   <el-tree
     :data="treeData"
     highlight-current
     @node-click="handleNodeClick"
   />

2. Vue Ant Design 的 a-tree 组件，通过 selectedKeys 控制选中项。

通过以上方法，可以灵活实现 Vue 中的树形结构单选功能。