el-tree-v2单选
时间: 2024-03-08 16:43:56 浏览: 103
TreeSelect-v2
el-tree-v2是一个基于Element UI的树形组件,用于展示层级结构的数据。它支持单选功能,可以让用户在树中选择一个节点。
要使用el-tree-v2的单选功能,你需要设置tree的show-checkbox属性为false,并且设置tree的node-key属性为每个节点的唯一标识符。这样,用户在点击树节点时,就可以触发选中事件,并且只能选择一个节点。
以下是使用el-tree-v2实现单选的示例代码:
```html
<template>
<el-tree
:data="treeData"
:props="treeProps"
show-checkbox="false"
@node-click="handleNodeClick"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '节点1',
children: [
{
id: 11,
label: '节点1-1',
},
{
id: 12,
label: '节点1-2',
},
],
},
{
id: 2,
label: '节点2',
},
],
treeProps: {
children: 'children',
label: 'label',
},
selectedNode: null,
};
},
methods: {
handleNodeClick(node) {
this.selectedNode = node;
},
},
};
</script>
```
在上面的代码中,treeData是树的数据源,treeProps是配置树节点的属性映射关系。handleNodeClick方法会在用户点击树节点时被调用,将选中的节点赋值给selectedNode变量。
阅读全文