Vue el-tree实现单选效果

场景：

        今天在做项目的时候，前端业务数据设计到树形展示，并需要单选，打开Element，选中 el-tree 组件，但官方文档中只支持多选，并不支持单选，需要对当前组件进行一定的拓展，以达到满足我们项目中的 要求。

解决思路：

     首先研读el-tree组件api ，我们可以得知，el-tree中有 check-change  事件，即当前节点选中状态发生变化时的回调，通过这个我们可以获得当前操作的节点对象。

    其次，在 el-tree 组件的方法中我们能找到 setCheckedKeys 设置当前所有已选中的节点(PS: 如api所述 使用 setCheckedKeys 时，必须设置 node-key 属性)

 

通过对上述 check-change 事件和 setCheckedKeys 方法的组合，我们可以通过 check-change 事件获取当前选中的节点对象，并通过 setCheckedKeys 方法设置当前 el-tree组件的选中节点为当前的节点对象，以实现我们的单选效果。

代码示例：

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