el-tree单选
时间: 2023-06-21 10:12:49 浏览: 96
在 `el-tree` 中实现单选可以通过以下步骤:
1. 在 `el-tree` 中设置 `node-key` 属性,该属性指定每个节点的唯一标识符。
```html
<el-tree :data="treeData" :node-key="nodeKey"></el-tree>
```
```js
data() {
return {
treeData: [
{ id: 1, label: 'Node 1' },
{ id: 2, label: 'Node 2', children: [
{ id: 3, label: 'Node 2-1' },
{ id: 4, label: 'Node 2-2' }
]}
],
nodeKey: 'id'
}
}
```
2. 在 `el-tree` 中设置 `default-checked-keys` 属性为空数组,以确保初始状态下没有选中的节点。
```html
<el-tree :data="treeData" :node-key="nodeKey" :default-checked-keys="[]"></el-tree>
```
3. 为 `el-tree` 的 `check` 事件添加处理函数。在处理函数中,使用 `setCheckedKeys` 方法设置选中的节点。由于是单选,我们只需要选中最后一次点击的节点。
```html
<el-tree :data="treeData" :node-key="nodeKey" :default-checked-keys="[]" @check="handleCheck"></el-tree>
```
```js
methods: {
handleCheck(checkedNodes, node) {
const lastCheckedNode = checkedNodes[checkedNodes.length - 1];
if (lastCheckedNode) {
const checkedKeys = [lastCheckedNode[this.nodeKey]];
this.$refs.tree.setCheckedKeys(checkedKeys);
}
}
}
```
完整的示例代码如下:
```html
<template>
<el-tree :data="treeData" :node-key="nodeKey" :default-checked-keys="[]" @check="handleCheck" ref="tree"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{ id: 1, label: 'Node 1' },
{ id: 2, label: 'Node 2', children: [
{ id: 3, label: 'Node 2-1' },
{ id: 4, label: 'Node 2-2' }
]}
],
nodeKey: 'id'
}
},
methods: {
handleCheck(checkedNodes, node) {
const lastCheckedNode = checkedNodes[checkedNodes.length - 1];
if (lastCheckedNode) {
const checkedKeys = [lastCheckedNode[this.nodeKey]];
this.$refs.tree.setCheckedKeys(checkedKeys);
}
}
}
}
</script>
```
阅读全文