首页vue3 element树状单选

vue3 element树状单选

时间: 2025-02-04 15:19:26 浏览: 50

### 如何在 Vue3 中使用 Element Plus 实现树状结构的单选功能为了实现在 Vue3 和 Element Plus 组件库中创建具有单选功能的树形结构，可以通过监听 `node-click` 事件来管理当前被选中的节点。每当点击一个新的节点时，先清除之前的选择再设置新的选择。 #### 完整示例代码如下： ```html <template> <div id="app">  <el-tree :data="treeData" @node-click="handleNodeClick" ref="treeRef" show-checkbox></el-tree>  <p v-if="selectedNodeId">Selected Node ID: {{ selectedNodeId }}</p> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; // 假设这是从API获取的数据 const treeData = [ { label: "Level one 1", children: [ { label: "Level two 2-1", children: [{label:"Item"}], }, ], } ]; let selectedNodeId = ref(null); const treeRef = ref(); function handleNodeClick(data) { // 清除所有节点的选择状态 treeRef.value.setCheckedKeys([]); // 设置新选中的节点为已选状态 treeRef.value.setCheckedKeys([data.id]); // 更新记录当前选中的节点ID selectedNodeId.value = data.id; } </script> ``` 此段代码展示了如何通过 `@node-click` 事件处理器响应用户的交互操作，并调用 `setCheckedKeys()` 方法手动控制哪些项应该处于选定状态。每次点击不同的节点都会触发该函数执行逻辑以确保只有一个节点保持高亮显示[^2]。

阅读全文