*** 注： load 和 lazy 屬性不是需要的粘貼時(shí)請(qǐng)刪除。（只有需要懶加載的樹(shù)才需要，關(guān)于怎樣構(gòu)建懶加載樹(shù)以后的文章會(huì)講到）***
屬性介紹：
1：:props="props" // 下面的 data 代碼中有說(shuō)明。
2：node-key="id" // 這個(gè)屬性是用來(lái)標(biāo)記 tree 的節(jié)點(diǎn)的 實(shí)現(xiàn) checkbox節(jié)點(diǎn)操控 必須搭配 node-key 使用，這里的 id 是根據(jù)數(shù)據(jù)里面的唯一字段定義的，如果你的數(shù)據(jù)里唯一字段為 isId 那就設(shè)置為 node-key="isId"。
3：:expand-no-click-node="true" // 為點(diǎn)擊節(jié)點(diǎn)時(shí)是否可展開(kāi)下一級(jí)別，true=展開(kāi)、false=不展開(kāi)。
4：ref="tree" // 定義 ref ，方便操作 dom 節(jié)點(diǎn) ，名字自定義。
5：show-checkbox // 顯示 checkbox 多選框。
6：:check-strictly="true" // 解除父子節(jié)點(diǎn)的關(guān)聯(lián)，true=解除、false=綁定。
7：@check="checkClick" // checkbox 背點(diǎn)擊的時(shí)候出發(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', // 用來(lái)定義 tree 上展示的字段，根據(jù)自己用到數(shù)據(jù)，綁定需要的字段名稱(chēng)。
        children:'childNodes', // tree 每一級(jí)別節(jié)點(diǎn)，子級(jí)數(shù)據(jù)，保存的字段位置，根據(jù)自己的數(shù)據(jù)，定義字段名稱(chēng)。
        isLeaf:'chlid', // 只有需要懶加載 tree 的時(shí)候用到，是用來(lái)確定時(shí)候?yàn)樽詈笠患?jí)別的節(jié)點(diǎn)，這樣該節(jié)點(diǎn)被點(diǎn)出來(lái)的時(shí)候，就不會(huì)提示還有下一級(jí)別的三角符號(hào) *注：這里復(fù)制的時(shí)候不要帶上這個(gè)屬性，至于如何時(shí)候后面的文章講到懶加載樹(shù)的時(shí)候會(huì)提到。
        id:'id' // 節(jié)點(diǎn)綁定的 id 要和上面 html 標(biāo)簽中的 node-key="id" 屬性設(shè)置的值要對(duì)應(yīng)。
      }
    }
  }

*** 注：下面方法中的 this.$bus.$emit() 是用來(lái)組件傳遞參數(shù)的。使用方式會(huì)在文章最下面提到。***
 methods:{
    // 這個(gè)方法默認(rèn)為兩個(gè)參數(shù)，第一個(gè)參數(shù)為選中的 checkbox 所在的節(jié)點(diǎn)數(shù)據(jù)，第二參數(shù)是目前選中狀態(tài)的集合之類(lèi)的一些數(shù)組集合，因?yàn)槭菃芜x這里不需要這個(gè)參數(shù)。
   checkClick(data){
     // 先默認(rèn)為多選模式， 獲取目前所有被選中 checkbox 的集合 這里的集合是每個(gè)節(jié)點(diǎn)的數(shù)據(jù)。
     let getNode = this.$refs.tree.getCheckedNodes()；
     // 判斷 getNode 長(zhǎng)度是否大于0，因?yàn)檫@里用到了組件之間的傳值了所有進(jìn)行了判斷，如果小于0，傳遞一個(gè)空的數(shù)據(jù)過(guò)去。（大于0：代表tree中有至少有一個(gè)checkbox被選中。 小于0：代表tree中沒(méi)有一個(gè)checkbox被選中）
     if (getNode.length > 0) {
       // 循環(huán) getNode 判斷如果當(dāng)前選中 checkbox 中的id 與 getNode 數(shù)組中有相同值的 id 的一項(xiàng)，那么就通過(guò) setChecked() 方法設(shè)置這個(gè)一項(xiàng)被選中，其他像項(xiàng)則通過(guò) 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)聽(tīng)傳參

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

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

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

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