【Vue+ElementUI】实现树形结构的单选操作实现后的效果图：
没有做gif图⽚，下次有时间做⼀下，替换过来吧，效果就是只能单选，⽽且只能选择最底端的叶⼦节点。
代码部分：
1）show-checkbox即可以打开树结构前⾯的框框，elementUI没有直接指定的单选操作，但是可以通过写⽅法实现 2）:filter-node-method="filterNode"
这个属性可以⽣成⼀个筛选框，具体效果就是效果图中的筛选框，绑定了filterNode⽅法
3）@check-change="lectTreeNode"
check change绑定lectTreeNode⽅法，具体实现看下⾯的⽅法
the fray<el-tree
ref="tree"
:data="treeData"
:props="defaultProps"
:filter-node-method="filterNode"
class="filter-tree"
show-checkbox
node-key="id"
highlight-current
default-expand-all
check-on-click-node
@check-change="lectTreeNode">
</el-tree>
这些是data（）中的内容
treeOption中的prop绑定了数据中的name
treeData和树进⾏了绑定，初始为空，⽽后会在init()⽅法中进⾏初始化
data() {
return {
filterText: '',
archForm: {},
treeOption: {
nodeKey: 'id',
addBtn: fal,
menu: fal,
props: {
label: 'name',
上海英语培训value: 'id'
}
},
treeData: [],
lectTreeOption: {},
defaultProps: {
label: 'name',
value: 'name'
}
tomato paste}
}
⽅法的具体实现：
1）init()是初始化⽅法，给treeData进⾏初始化赋值，⽽后被<el-tree>插件所调⽤
2）lectTreeNode(data, checked, indeterminate)
此⽅法⾃带三个参数，第⼀个参数data是所有被选中的⾏的信息，即传递给 data 属性的数组中该节点所对应的对象；
第⼆个参数checked为节点本⾝是否被选中，因为change事件是选中和取消选择都会触发的；
sunri什么意思第三个参数为节点的⼦树中是否有被选中的节点。toilet
这个⽅法挺有意思的，check状态如果发⽣了改变，会依次对当前状态的所有的check节点进⾏循环调⽤，可以在⽅法⾥加个alert 试⼀试。在这个⽅法⾥我添加了⼀个条件判断，当data.children.length == 0时，说明此节点为叶⼦节点，即不包含任何的children。lectTreeOption存储当前的check节点；this.$CheckedKeys(arr)中的arr可以是⼀个数组，这⼀⾏的意思为对tree进⾏⼀个整体的check设置，即实现树的单选操作。
3）filterNode(value,data)中的value即是当前输⼊的值，data为树的值，这个也是⼀个change事件，只要输⼊框中的数据发⽣改变，就会⾃动调⽤这个⽅法。
nur是什么意思
created() {
this.init()
},
methods: {
儿童英语小故事
init() {cfa培训
fetchTree().then(respon => {
})
},
lectTreeNode(data, checked, indeterminate) { if (checked) {
if (data.children.length == 0) {
this.lectTreeOption = data
}
const arr = [data.id]lady gaga 好听的歌
this.$CheckedKeys(arr)
}
},
filterNode(value, data) {
pv是什么意思if (!value) return true
return data.name.indexOf(value) !== -1
},
handleRefreshChange() {
}
}
