vue+elementui实现树组件单选

最近在做一个项目是用vuejs+elementui开发的，其中有一个功能是要用到树组件，要求是做成单选的，且选择子节点后，对应的父节点也相应选中，但是elementui的树组件是多选的，所以要自己去改一下了。

这里要说明的是，由于我们的后端同事在数据里面都会提供该节点的父节点id，所以我这样操作会很方便，否则的话，就需要自己去循环tree的数据，然后去获取当前节点的父节点，还是比较麻烦的，特别是如果节点下面有很多子节点，且子节点数量不规则的话，就更加麻烦了。

先说下我的思路：

1、用tree组件提供的 check-strictly 属性让父子节点不关联。

2、在点击复选框的时候获取到当前节点的父节点id，然后用 tree组件提供的 setCheckedKeys 方法来设置默认选中的父节点。

这里是因为要选中相应的父节点，所以比较麻烦，如果是只需要单选功能，选择子节点之后相应的父节点不需要选中的话，那么只需要这样做：
使用check-change来触发节点选中，check-strictly让父子节点不关联

>

handleCheckChange 方法只需要这样就好了，其他方法按照自己的需求写就好了。

handleCheckChange(data, checked) {
	if(checked) {
		this.$refs.chapterTree.setCheckedKeys([data.id])
	}
},

下面开始就是让树组件单选，且点击子节点对应的父节点选中的方法：

注意：
1、点击复选框要用check方法，
2、el-scrollbar是elementui提供的滚动条标签，一般树组件都是用滚动条触底加载更多的方式，而不是翻页，所以就用了这个标签来包裹，给指定高度即可。
3、v-infinite-scroll是滚动条到底触发事件。
4、infinite-scroll-immediate是否立即执行加载方法。
滚动条具体的方法可以自己看elementui官网

最后提供源码链接：https://github.com/waikam/vue-elementui-tree