應用場景：

動態(tài)路由權限配置，菜單和按鈕在一顆樹內顯示，要求按鈕可以不被勾選（按鈕一定為葉子節(jié)點），即葉子節(jié)點可以不嚴格關聯(lián)
此時我們的tree需要設置node-key、check-strictly為true,

截屏2020-04-17下午11.20.04.png

截屏2020-04-17下午11.23.54.png

實現(xiàn)邏輯

監(jiān)聽tree的check事件和treesetChecked方法
tips：tree的數據（data）每級需要有上級的父節(jié)點id字段

實現(xiàn)方法

1.組建設置，如果返回的數據字段與tree的指定字段不相同，通過props設置

    <el-tree
      :data="treeData"
      node-key="id"
      show-checkbox
      check-strictly
      ref="tree"
      @check="hanleCheck"
    ></el-tree>

2.監(jiān)聽treecheck方法，這里我們設置上次id的字段為parentId

hanleCheck(data,node){
    const  _this = this
    // 獲取當前節(jié)點是否被選中
    const isChecked = this.$refs.tree.getNode(data).checked
   // 如果當前節(jié)點被選中，則遍歷上級節(jié)點和下級子節(jié)點并選中，如果當前節(jié)點取消選中，則遍歷下級節(jié)點并取消選中
    if(isChecked){
        // 判斷是否有上級節(jié)點，如果有那么遍歷設置上級節(jié)點選中
        data.parentId &&  setParentChecked(data.parentId)
        // 判斷該節(jié)點是否有下級節(jié)點，如果有那么遍歷設置下級節(jié)點為選中
        data.children && setChildreChecked(data.children,true)
     }else{
       // 如果節(jié)點取消選中，則取消該節(jié)點下的子節(jié)點選中
        data.children && setChildreChecked(data.children,false)
      }
      function setParentChecked(parenId){
          // 獲取該id的父級node
          const parentNode = _this.$refs.tree.getNode(parentId)
         // 如果該id的父級node存在父級id則繼續(xù)遍歷
          parentNode.data.parentId && setParentChecked(setParentChecked)
          //  設置該id的節(jié)點為選中狀態(tài)
          _this.$refs.tree.setChecked(parenId,true)
      }
      function setChildreChecked(node,isChecked){
        node.forEach(item => {
          item.children && setChildreChecked(item.children,isChecked)
          _this.$refs.setChecked(item.id,isChecked)
        })
      }
    
}

案例

demo

屏幕錄制2020-04-18上午12.24.07.gif