Element-ui tree 组件实现checkbox单选效果后，如何再清空？

Question

问题描述

系统内需要一个部门选择器（即组织架构），且每次只能选择一个部门，很多页面都要用，所以封装成了公用的子组件，通过内置的弹框组件el-dialog显示和隐藏，利用setCheckedKeys方法实现了单选效果，但是只要勾选了一个部门后，就无法通过setCheckedKeys或setChecked清空所有选项

选择子组件的部门后，父组件的表单就会显示对应的部门名称

父组件的表单清空后，子组件的部门选择器对应的勾选无法取消，导致效果不统一

问题出现的环境背景及自己尝试过哪些方法

通过this.$refs.tree.setCheckedKeys([])方法无法取消勾选，原因是下方有这段代码：
//禁止取消勾选当前的checkbox，相当于radio的效果

    if(this.department_id==data.id){
      this.$refs.tree.setCheckedKeys([data.id],true)
    }

去掉这段代码就可以通过this.$refs.tree.setCheckedKeys([])方法取消所有的勾选，但不符合产品需求

相关代码

<template>
<el-dialog width="520px" :visible.sync="dialogState" @opened="open" :before-close="beforeClose" title="选择部门">

    
<el-tree :data="organization" 
:props="defaultProps"
node-key="id"
ref="tree"
:expand-on-click-node="false"
@check-change="handleClick"
show-checkbox
check-on-click-node
:check-strictly="true"
default-expand-all
icon-class="el-icon-menu"></el-tree>

<div slot="footer" class="dialog-footer">
  <el-button @click="beforeClose">取 消</el-button>
  <el-button type="primary" @click="$emit('change-department',department_id,department_name)">确 定</el-button>
</div>

</el-dialog>
</template>

//弹框打开后，通过父组件传过来的值判断是否清除勾选，但是没有效果
open(){

  let self = this
  self.$refs.tree.setCheckedKeys([])
},

//利用setCheckedKeys方法实现了tree组件checkbox的单选效果

handleClick(data,checked, node) {
  if(checked){
    this.department_id = data.id
    this.department_name = data.name
    //只勾选当前点击的checkbox，其它的就会清空
    this.$refs.tree.setCheckedKeys([data.id],true)
  }else{
    //禁止取消勾选当前的checkbox，相当于radio的效果
    if(this.department_id==data.id){
      this.$refs.tree.setCheckedKeys([data.id],true)
    }
  }
},

请问大家还有其它方法吗？既能实现类似于radio的效果，又能在需要的时候取消所有的勾选，就像部门选择器初始化的时候那样，没有任何勾选

Answer 1

题主看看是不是这样的效果https://jsfiddle.net/edx6gyp5/5/

Answer 2

在子组件（就是你那个tree组件）里写一个方法clearData，是清空数据的。
父组件点击清空按钮时触发子组件的方法clearData