vue实现树形结构单选

Vue实现树形结构单选的方法

使用Element UI的Tree组件

Element UI的Tree组件支持单选功能，通过设置show-checkbox和check-strictly属性可以实现单选效果。

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    :check-strictly="true"
    @check="handleCheck"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级节点',
          children: [
            {
              id: 2,
              label: '二级节点'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleCheck(node, checked) {
      if (checked.checkedKeys.length > 1) {
        this.$refs.tree.setCheckedKeys([node.id])
      }
    }
  }
}
</script>

自定义Tree组件实现单选

对于不使用UI库的情况，可以自定义Tree组件实现单选功能。

<template>
  <div class="tree">
    <div
      v-for="node in treeData"
      :key="node.id"
      class="tree-node"
      @click="selectNode(node)"
    >
      <div :class="{ 'selected': selectedNode === node }">
        {{ node.label }}
      </div>
      <tree-node
        v-if="node.children"
        :nodes="node.children"
        :selected-node="selectedNode"
        @node-selected="selectNode"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    nodes: Array,
    selectedNode: Object
  },
  methods: {
    selectNode(node) {
      this.$emit('node-selected', node)
    }
  }
}
</script>

使用Vuex管理选中状态

对于大型应用，可以使用Vuex集中管理树形结构的选中状态。

// store.js
export default new Vuex.Store({
  state: {
    treeSelectedNode: null
  },
  mutations: {
    setTreeSelectedNode(state, node) {
      state.treeSelectedNode = node
    }
  }
})

<!-- 组件中使用 -->
<template>
  <div @click="selectNode(node)">
    {{ node.label }}
  </div>
</template>

<script>
export default {
  methods: {
    selectNode(node) {
      this.$store.commit('setTreeSelectedNode', node)
    }
  }
}
</script>

递归组件实现深层次树结构

对于多层级树形结构，递归组件是最佳选择。

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

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

export default {
  components: { TreeNode },
  props: {
    treeData: Array,
    selectedId: [String, Number]
  },
  methods: {
    onSelect(id) {
      this.$emit('select', id)
    }
  }
}
</script>

性能优化建议

对于大型树形结构，应考虑虚拟滚动技术避免渲染所有节点。可以使用vue-virtual-scroll-list等库优化性能。

import VirtualList from 'vue-virtual-scroll-list'

export default {
  components: {
    VirtualList
  },
  data() {
    return {
      treeData: [],
      selectedNode: null
    }
  }
}

以上方法提供了不同场景下Vue实现树形结构单选的解决方案，可根据项目需求选择适合的方式。