el-tree只可选中一个

### 实现 Element UI 的 `el-tree` 组件仅支持单选 为了使 `el-tree` 组件实现单选功能，可以通过设置属性 `node-click` 和关闭默认的多选行为来完成。以下是具体方法： #### 方法说明 1. **移除复选框** 将 `show-checkbox` 属性删除，因为该属性会启用多选模式。 2. **监听节点点击事件** 使用 `@node-click` 事件监听用户的点击操作，并手动控制当前选中的节点状态。 3. **高亮显示选中项** 设置 `highlight-current=true` 来突出显示当前被选中的节点。 4. **禁用父级节点的选择** 配置 `check-strictly` 并结合过滤逻辑，在渲染时动态调整节点的状态。 下面是具体的代码示例： ```vue <template> <div> <el-tree ref="tree" :data="deptOptions" node-key="stationId" :props="{ label: 'title', children: 'children' }" highlight-current @node-click="handleNodeClick" :filter-node-method="filterNode" :default-expanded-keys="expandedKeys" :render-after-expand="false"> </el-tree> </div> </template> <script> export default { data() { return { deptOptions: [ { stationId: 1, title: "一级", children: [{ stationId: 2, title: "二级", children: [{ stationId: 3, title: "三级" }] }] }, ], selectedNode: null, expandedKeys: [], }; }, methods: { handleNodeClick(data) { this.$refs.tree.setCurrentKey(data.stationId); // 设置当前选中的节点 if (this.selectedNode && this.selectedNode !== data.stationId) { const prevSelected = this.deptOptions.find((item) => item.stationId === this.selectedNode); if (prevSelected) { this.$set(prevSelected, "_disabled", false); // 解锁之前的选项 } } this.selectedNode = data.stationId; console.log("当前选中的节点:", data); // 如果是父节点，则不允许选择 if (!data.children || !Array.isArray(data.children)) { this.$set(data, "_disabled", true); // 锁定其他兄弟节点 } }, filterNode(value, data) { if (!value) return true; return data.title.indexOf(value) !== -1; }, }, }; </script> ``` --- 上述代码实现了以下目标： - 移除了复选框的功能[^1]。 - 启用了单击节点即可触发选中效果的行为。 - 动态锁定已选中的节点及其兄弟节点，防止重复选择[^3]。 如果需要进一步扩展功能，可以考虑引入异步数据加载机制并优化性能表现。 --- ###