element中el-tree组件实现单选方法

element中el-tree组件实现单选方法

今天在做项目中刚好遇到了有这个问题,记录一下,分享给大家

check-strictly 来控制父子互不互相关联的做法

代码示例

<el-tree
	@check-change="getTree2"
	:data="treeData2"
	show-checkbox
	node-key="id"
	ref="treeData2"
	:props="defaultProps"
></el-tree>

注意 使用 setCheckedKeys 时，必须设置 node-key 属性

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

getTree2(data, checked) {
  if (checked) {
    this.$refs.treeData2.setCheckedKeys([data.id]);
    //data 即为选择的集合值
  }
},