要實現的效果為，勾選父節點時，子節點不會被勾選，如圖：

點擊父節點.png

勾選子節點時，父節點勾選，如圖：

點擊第三級子節點時.png

取消父節點時，子節點全部取消，如圖：

第一級父節點取消勾選時.png

1、在el-tree代碼中加上父子節點不互相關聯的屬性，:check-strictly="true"，然后綁定節點選中時的事件，@check-change ="checkChange"。

父子節點不互相關聯的屬性.png

節點勾選時的回調事件.png

vue代碼如下：

<el-tree
        show-checkbox
        :check-on-click-node="true"
        :data="allMenu"
        default-expand-all
        node-key="id"
        :expand-on-click-node="false"
        :props="menuProps"
        ref="menuTree"

        @check-change ="checkChange"
        :check-strictly="true">
           
</el-tree>

2、js代碼如下：

// 節點選中
    checkChange(a,b,c){  
      // 如果為取消
      if(b === false){
        //如果當前節點有子集
        if(a.children){
        //循環子集將他們的選中取消
          a.children.map(item => {
            this.$refs.menuTree.setChecked(item.id,false);
          })
        }
      }else{
        //否則(為選中狀態)
        //判斷父節點id是否為空
        if(a.pid !== 0){
        //如果不為空則將其選中
          this.$refs.menuTree.setChecked(a.pid,true);
        }
      }
    },