解决element UI tree控件无单选API，无法实现单选问题

.vue文件

<el-tree
  :data="treeData"
  show-checkbox
  node-key="id"  
  :props="defaultProps"
  check-strictly
  @check-change="handleClick" 
  ref="treeForm">           
</el-tree>

ref  vue 的引用信息
node-key="id"   树节点的唯一标识(查看官网API)
:props="defaultProps"  tree树的默认属性修改
check-strictly   父节点不相关联子节点

@check-change="handleClick"  当前节点变化时处理事件

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

.js文件

export default{ data(){ return { i: 0, } }, computed:{ }, mounted(){ }, methods:{ handleClick(data, checked, node) { this.i++;

//此处注意父节点的个数，从而影响首次点击的效果。即如果为3级节点，需要加上if(this.i>2)的条件。 if( this.i% 2== 0){ if( checked){ this.$refs.treeForm.setCheckedNodes([]); this.$refs.treeForm.setCheckedNodes([data]); //交叉点击节点 } else{ this.$refs.treeForm.setCheckedNodes([]); //点击已经选中的节点，置空 } } }, } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

注意：setCheckedNodes  
勾选的节点，必须设置 node-key 属性

• 1
• 2
• 3

参考来源  :   element UI官网