Element-ui Tree組件實現單選

　　下午遇到一個需求：要求樹只能單選（我們用的Element-ui 的tree組件，官方文檔默認支持的是多選），現將實現單選的方法記錄下：

　　template中新增如下：

<el-tree
  @check-change="handleCheckChange"
  :props="defaultProps">
</el-tree>

　　script中新增如下

methods: {
      handleCheckChange (data, checked, indeterminate) {
        let {id} = data

        let index = this.checked.indexOf(id)

        // 當前節點不在this.checked中,且當前節點為選中狀態
        if (index < 0 && this.checked.length && checked) {
          this.$message.warning('只能選中一個節點')
          this.$refs.tree.setChecked(data, false) // 取消當前節點的選中狀態
          return
        }

        // 當前節點在this.checked中,當前節點為未選中狀態(主動去掉當前選中狀態)
        if (!checked && index >= 0 && this.checked.length) {
          this.checked = []
          return
        }

        // 當前節點不在this.checked(長度為0)中,當前節點為選中狀態,this.checked中存儲當前節點id
        if (index < 0 && !this.checked.length && checked) {
          this.checked.push(id)
        }
     },
 },
data () {
   return {
      checked: [], // 存儲選中節點的id
  }      
}

　　在線demo地址為：https://codepen.io/pen/?&editable=true