*** 注： load 和 lazy 屬性不是需要的粘貼時請刪除。（只有需要懶加載的樹才需要，關(guān)于怎樣構(gòu)建懶加載樹以后的文章會講到）***
屬性介紹：
1：:props="props" // 下面的 data 代碼中有說明。
2：node-key="id" // 這個屬性是用來標記 tree 的節(jié)點的 實現(xiàn) checkbox節(jié)點操控 必須搭配 node-key 使用，這里的 id 是根據(jù)數(shù)據(jù)里面的唯一字段定義的，如果你的數(shù)據(jù)里唯一字段為 isId 那就設(shè)置為 node-key="isId"。
3：:expand-no-click-node="true" // 為點擊節(jié)點時是否可展開下一級別，true=展開、false=不展開。
4：ref="tree" // 定義 ref ，方便操作 dom 節(jié)點 ，名字自定義。
5：show-checkbox // 顯示 checkbox 多選框。
6：:check-strictly="true" // 解除父子節(jié)點的關(guān)聯(lián)，true=解除、false=綁定。
7：@check="checkClick" // checkbox 背點擊的時候出發(fā)的事件。
 <el-tree
   :props="props"
   :load="loadNode"
   lazy
   node-key="id"
   :expand-no-click-node="true"
   ref="tree"
   show-checkbox
   :check-strictly="true"
   @check="checkClick"
 >
 </el-tree>

 export default {
  data(){
    return{
      props:{
        label:'text', // 用來定義 tree 上展示的字段，根據(jù)自己用到數(shù)據(jù)，綁定需要的字段名稱。
        children:'childNodes', // tree 每一級別節(jié)點，子級數(shù)據(jù)，保存的字段位置，根據(jù)自己的數(shù)據(jù)，定義字段名稱。
        isLeaf:'chlid', // 只有需要懶加載 tree 的時候用到，是用來確定時候為最后一級別的節(jié)點，這樣該節(jié)點被點出來的時候，就不會提示還有下一級別的三角符號 *注：這里復(fù)制的時候不要帶上這個屬性，至于如何時候后面的文章講到懶加載樹的時候會提到。
        id:'id' // 節(jié)點綁定的 id 要和上面 html 標簽中的 node-key="id" 屬性設(shè)置的值要對應(yīng)。
      }
    }
  }

*** 注：下面方法中的 this.$bus.$emit() 是用來組件傳遞參數(shù)的。使用方式會在文章最下面提到。***
 methods:{
    // 這個方法默認為兩個參數(shù)，第一個參數(shù)為選中的 checkbox 所在的節(jié)點數(shù)據(jù)，第二參數(shù)是目前選中狀態(tài)的集合之類的一些數(shù)組集合，因為是單選這里不需要這個參數(shù)。
   checkClick(data){
     // 先默認為多選模式， 獲取目前所有被選中 checkbox 的集合 這里的集合是每個節(jié)點的數(shù)據(jù)。
     let getNode = this.$refs.tree.getCheckedNodes()；
     // 判斷 getNode 長度是否大于0，因為這里用到了組件之間的傳值了所有進行了判斷，如果小于0，傳遞一個空的數(shù)據(jù)過去。（大于0：代表tree中有至少有一個checkbox被選中。 小于0：代表tree中沒有一個checkbox被選中）
     if (getNode.length > 0) {
       // 循環(huán) getNode 判斷如果當前選中 checkbox 中的id 與 getNode 數(shù)組中有相同值的 id 的一項，那么就通過 setChecked() 方法設(shè)置這個一項被選中，其他像項則通過 setChecked() 取消選定
       getNode.forEach(item => {
         if (data.id == item.id) {
           this.$refs.tree.setChecked(item.id , true);
           this.$bus.$emit('otherCheck' , item.id)
         } else {
           this.$refs.tree.setChecked(item.id , false);
         }
       } ）
     } else {
       this.$bus.$emit('otherCheck' , '')
     }
   }
 }

$emit: 傳遞參數(shù)；  $on: 接收參數(shù)；  $off: 解除監(jiān)聽傳參

 *** main.js ***
 let bus = new Vue()
 Vue.prototype.$bus = bus

*** 注：
1、name：自己定義的名字隨便起就行，但是注意在被傳遞組件中要用相同的名字去接收，解除監(jiān)聽傳參也是同樣的名字的解除。
2、data：這里的參數(shù)data可以是對象、字符串、數(shù)字。參數(shù)也可以穿多個，例如 ：this.$bus.$emit('name',a,b,c,d);不過通常情況下，都是出傳一個 data 對象即可，這樣方便取值和查看。
 ***
this.$bus.$emit('name',data)

單個對象、字符串、數(shù)字等方式接收參數(shù) (***推薦***)
this.$bus.$on('name',res => {
   console.log(res)
})
多個參數(shù)接收方參數(shù) (不推薦)
this.$bus.$on('name'(a,b,c,d) => {
   console.log(a,b,c,d)
})

// 可以在組件銷毀前 解除監(jiān)聽
beforeDestroy () {
  this.$bus.$off('name');
},