el-tree 单选
时间: 2023-08-28 07:20:28 浏览: 58
要实现 el-tree 的单选功能,你可以使用 el-tree 的 `show-checkbox` 属性来显示复选框,并设置为 `false`,这样只会显示单选按钮。然后,在节点被选中时,你可以通过监听 `node-click` 事件来更新选中的节点数据。以下是一个示例:
```html
<template>
<el-tree
:data="data"
:show-checkbox="false"
@node-click="handleNodeClick"
></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: 'Node 1',
children: [
{ label: 'Node 1-1' },
{ label: 'Node 1-2' },
{ label: 'Node 1-3' },
],
},
{
label: 'Node 2',
children: [
{ label: 'Node 2-1' },
{ label: 'Node 2-2' },
],
},
],
selectedNode: null, // 存储选中的节点数据
};
},
methods: {
handleNodeClick(nodeData) {
this.selectedNode = nodeData;
},
},
};
</script>
```
在上述示例中,`show-checkbox` 属性被设置为 `false`,只显示单选按钮。然后,通过监听 `node-click` 事件,在事件处理程序中更新 `selectedNode` 数据,以记录当前选中的节点。你可以根据需要进一步处理选中节点的逻辑。