iView的tree組件實現單選功能

iView中的樹組件有復選框可以多選，但是目前還沒有提供單選框的模式，不顯示復選框可以提供高亮單選的模式，但是再次點擊就被取消了，沒有實現真正的單選；

tree 的屬性配置中 multiple 是否支持多選，是在不顯示復選框的時候生效的，不能控制復選框支不支持多選；

實現單選功能中用到了：

:show-checkbox="true"  // 是否顯示復選框
:check-strictly="true" // 顯示復選框的前提下，是否讓父子節點不聯動
:check-directly="true" // 在顯示復選框的前提下，讓節點的選中觸發復選框的選中
@on-check-change="treeChange"  // 復選框被選中的時候觸發，可能是點擊復選框的時候被選中，也可能是點擊節點的時候被選中；返回 當前已勾選節點的數組、當前項

使用 getSelectedNodes() 獲取被選中的節點數組，getSelectedNodes()[0] 獲得被選中節點的數據

 

視圖、邏輯、樣式 如下：

<template>
<Tree
 ref="orgTree"
 :data="orgTree"
 :show-checkbox="true"
 :check-strictly="true"
 :check-directly="true"
 @on-check-change="treeChange"
 ></Tree>
</template>

<script>
...
methods:{
    // 樹復選框發生改變--只能有一個被選中
    treeChange(arr, obj) {
      // 清空所有已選中的
      arr.forEach(item => {
        item.checked = false;
      });
      // 只選中最后一次選中的
      obj.checked = true;
    }
}
</script>

<style>
 /* 讓方形復選框變成圓形單選框樣式，最好在樹組件外套一個父盒子，在樣式前加父級選擇器，以免影響其他樹組件*/
 .ivu-checkbox-inner {
    border-radius: 50%;
  }
</style>

寫的比較簡單，可能還有不完善的地方，還請各位大佬批評指正