el-tree实现单选

实现之后的单选效果图：

下面贴代码：
结构：

<el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>

<el-tree
  class="filter-tree"
  :data="treeObj.optionList"
  :props="defaultProps"
  node-key="value"
  :check-strictly="true"
  default-expand-all
  show-checkbox
  @check="treeNodeClick"
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>

数据来源格式：

treeObj = {
  optionList: [{
    label: '一级 1',
    value: '1',
    children: [{
      label: '二级 1-1',
      value: '1-1',
      children: [{
        label: '三级 1-1-1',
        value: '1-1-1',
      },{
        label: '三级 1-1-2',
        value: '1-1-2',
      }]
    },{
      label: '二级 1-2',
      value: '1-2'
    }]
  },{
    label: '一级 2',
    value: '2',
    children: [{
      label: '一级 2-1',
      value: '2-1'
    }]
  }]
}

数据：

export default {
  name: 'treeDialog',
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentCheckData: {} // 当前选中的值
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    treeObj: {
      type: Object,
      default: {}
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 点击时设置单选
    treeNodeClick(data) {
      let tempData = this.$refs.tree.getCheckedKeys()
      if(this.currentCheckData.value === data.value) {
        this.currentCheckData = {}
        this.$emit('getTreeData', {})
        this.$refs.tree.setCheckedKeys([])
      }else {
        this.currentCheckData = data
        this.$emit('getTreeData', data)
        this.$refs.tree.setCheckedKeys([data.value])
      }
    },
    submit(){
      this.$emit('update:show', false)
    }
  }
}
</script>

主要方法：

// 点击时设置单选
    treeNodeClick(data) {
      // 如果记录的值和当前选中的值的value一致则进行对应的置空处理
      if(this.currentCheckData.value === data.value) {
        this.currentCheckData = {}
        this.$refs.tree.setCheckedKeys([])
      }else {
      // 否则，覆盖原先的值
        this.currentCheckData = data
        this.$refs.tree.setCheckedKeys([data.value])
      }
    },