<template>  <div class = "loginModuel">    <Tree :menus = "menus" :depth = "depth" @selectItem = "selectItem" :actId = "actId" @checkItem = "checkItem"></Tree>  </div></template><script src = "./index.js"></script><style lang = "scss" scoped src = "./index.scss"></style>

import Tree from '../../components/tree/tree';import axios from 'axios';export default{  data(){    return{      msg:"這是登錄頁面",      depth:0,      menus:[],      actId:"",    }  },  components:{    Tree  },  methods:{    //用ajax獲取數據    getData(){      return axios.get('/static/json/data.json');    },    // 調用ajax函數    async getTree(){      var last = await this.getData();      if(last.data.code == 1){        this.menus = last.data.data;        //在每一項中添加selectArr和show        this.addShow(this.menus);      }    },    //遞歸函數在每一項中添加selectArr和show    addShow(arr){      for(var i = 0; i < arr.length;i++){        this.$set(arr[i],"show",true);        this.$set(arr[i],"selectArr",[]);        if(arr[i].userList && arr[i].userList.length > 0){          this.addShow(arr[i].userList)        }      }    },    //點擊箭頭使樹展開收縮    selectItem(data){      if(data.userList && data.userList.length > 0){        //如果此項下有userList且length大于0，則切換展開與折疊狀態        data.show = !data.show;      }else{        //如果此項下沒有userList或length等于0，則將選中的id賦值給actId        this.actId = data.id;      }    },    //進行多選勾選    checkItem(data){      if(data.selectArr.length > 0){        //如果這一項的selectArr有值，說明是被勾選狀態，要把selectArr清空，清空勾選        data.selectArr = [];        //如果此選項清空勾選后，如果下面有userList的話，那么也同時要清空        if(data.userList && data.userList.length > 0){          this.clearChild(data.userList);        }        //如果此選項清空勾選后，要把所有的父元素，也全部清空勾選，因為它不勾選了，所有父元素的狀態不可能還處于勾選狀態，不管它勾選不勾選，我們都要清除一遍，以防萬一        this.clearFather(this.menus,data);      }else{//如果這一項的selectArr為[]，說明是未被勾選狀態，在selectArr里加id值，添加勾選        data.selectArr.push(data.id);        //如果此選項清空勾選后，如果下面有userList的話，那么也同時勾選下面所有的孩子        if(data.userList && data.userList.length > 0){          this.addChild(data.userList);        }        //如果此選項勾選后，要判斷所有的上級元素是不是應該全部打勾        this.selectFather(this.menus,data);      }    },    //定義函數清空所有孩子的勾選    clearChild(arr){      for(var i = 0; i < arr.length;i++){        arr[i].selectArr = [];        if(arr[i].userList && arr[i].userList.length > 0){          this.clearChild(arr[i].userList);        }      }    },    //定義函數添加所有孩子的勾選    addChild(arr){      for(var i = 0; i < arr.length;i++){        arr[i].selectArr.push(arr[i].id);        if(arr[i].userList && arr[i].userList.length > 0){          this.addChild(arr[i].userList);        }      }    },    //定義函數一層一層的往上尋找父元素的userList    clearFather(father,data){      for(var i = 0; i < father.length;i++){        if(father[i].id == data.id){          //找到data所在的userList為father，然后再通過這個userList找到擁有這個userList的父元素          this.clearRealFather(this.menus,father);        }else if(father[i].userList && father[i].userList.length > 0){          this.clearFather(father[i].userList,data);        }      }    },    //定義函數根據找到的上層父元素的userList來尋找父元素，并將他們清除勾選    clearRealFather(menus,arr){      for(var i = 0; i < menus.length;i++){        if(menus[i].userList == arr){          //找到這個擁有userList的父元素后，將此selectArr清空          menus[i].selectArr = [];          //找到這個擁有userList的父元素后，再調用clearFather，再進行向上尋找父元素，知道沒有父元素為止          this.clearFather(this.menus,menus[i]);        }else if(menus[i].userList && menus[i].userList.length > 0){          this.clearRealFather(menus[i].userList,arr);        }      }    },    //定義函數一層一層的往上尋找父元素的userList    selectFather(father,data){      for(var i = 0; i < father.length;i++){        if(father[i].id == data.id){          var arr = [];          for(var j = 0; j < father.length;j++){            if(father[j].selectArr.length > 0){              arr.push(father[i]);            }          }          //判斷此數組中是不是所有的selectArr都有值，如果有值，就執行selectRealFather，將上層父元素也勾選          if(arr.length == father.length){            this.selectRealFather(this.menus,father);          }        }else if(father[i].userList && father[i].userList.length > 0){          this.selectFather(father[i].userList,data);        }      }    },    //定義函數根據找到的上層父元素的userList來尋找父元素，并將他們清除勾選    selectRealFather(menus,arr){      for(var i = 0; i < menus.length;i++){        if(menus[i].userList == arr){          //找到這個擁有userList的父元素后，給selectArr賦值，使其勾選          menus[i].selectArr.push(menus[i].id);          //找到這個擁有userList的父元素后，再調用clearFather，再進行向上尋找父元素，知道沒有父元素為止          this.clearFather(this.menus,menus[i]);        }else if(menus[i].userList && menus[i].userList.length > 0){          this.selectRealFather(menus[i].userList,arr);        }      }    }  },  mounted(){    this.getTree();  }}

<template>  <ul class = "treeMoudel">    <li v-for = "(item,index) in menus" :key = "index">      <!-- 遍歷menus，如果傳過來的depth等于0，就添加topNode的class，如果不等于0，就添加noTopNode的class -->      <div :class = "{'itemTree':true,'topNode':depth == 0,'noTopNode':depth != 0,'active':actId == item.id}">        <!-- 判斷如果含有name字段就顯示name字段 -->        <span :style = "transform" v-if = "item.name" :class = "{'topSpan':depth == 0,'noTopSpan':depth != 0}">          <!-- 如果item有孩子且item.show為false,那么圖標為折疊圖標 -->          <i class = "el-icon-caret-right" v-if = "item.userList && item.userList.length > 0 && !item.show" @click = "selectItem(item)"></i>          <!-- 如果item有孩子且item.show為true,那么圖標為展開圖標 -->          <i class = "el-icon-caret-bottom" v-if = "item.userList && item.userList.length > 0 && item.show" @click = "selectItem(item)"></i>          <i class = "selectBox" @click = "checkItem(item)">            <!-- 如果item的selectArr.length是大于0的，也就是里面有值的話就是勾選狀態，否則就是不勾選狀態 -->            <i :class = "{'checkName iconfont':true, 'gouxuan5':item.selectArr.length > 0}" ></i>          </i>          {{item.name}}        </span>        <!-- 判斷如果含有username字段就顯示username字段 -->        <span :style = "transform" v-if = "item.username" :class = "{'topSpan':depth == 0,'noTopSpan':depth != 0}">          <!-- 如果item有孩子且item.show為false,那么圖標為折疊圖標 -->          <i class = "el-icon-caret-right" v-if = "item.userList && item.userList.length > 0 && !item.show" @click = "selectItem(item)"></i>          <!-- 如果item有孩子且item.show為true,那么圖標為展開圖標 -->          <i class = "el-icon-caret-bottom" v-if = "item.userList && item.userList.length > 0 && item.show" @click = "selectItem(item)"></i>          <i class = "selectBox" @click = "checkItem(item)">            <!-- 如果item的selectArr.length是大于0的，也就是里面有值的話就是勾選狀態，否則就是不勾選狀態 -->            <i :class = "{'checkUsername iconfont':true, 'gouxuan5':item.selectArr.length > 0}"></i>          </i>          {{item.username}}        </span>      </div>      <el-collapse-transition>        <!-- 遞歸組件就是自己調用自己，這里是在自己的組件內再次調用自己，但是務必要和pages中的tree頁面中使用的一模一樣才可以，否則樹不會生效 -->        <Tree v-if = "item.userList && item.userList.length > 0 && item.show" :menus = "item.userList" :depth = "depth+4" @selectItem = "selectItem" :actId = "actId" @checkItem = "checkItem"></Tree>      </el-collapse-transition>    </li>  </ul></template><script src = "./index.js"></script><style src = "./index.scss" lang = "scss" scoped></style>

export default{  name:"Tree",  props:["menus","depth","actId"],  data(){    return{      msg:"這是二級菜單樹",    }  },  methods:{    // 將selectItem方法暴露出去    selectItem(item){      this.$emit("selectItem",item);    },    // 將checkItem方法暴露出去    checkItem(item){      this.$emit("checkItem",item);    }  },  computed:{    //通過傳過來的depth計算下級目錄的偏移量，這里我用的transform    transform(){      return 'transform:translateX(' + this.depth*10 + 'px)';    }  }}

.treeMoudel{  li{    .itemTree{      width: 100%;      padding-left:30px;      position: relative;      &:hover{        background:#2B9EEE;        color:#fff;      }      .selectBox{        display: inline-block;        width: 16px;        height:16px;        border:1px solid #ccc;        border-radius: 3px;        position: relative;        background: #fff;        top:2px;        .checkName{          position: absolute;          top:-16px;          left:0px;          color:#333;        }        .checkUsername{          position: absolute;          top:-12px;          left:0px;          color:#333;        }      }      span{        display: inline-block;        position: absolute;        font-size:14px;      }      .topSpan{        font-size:16px;      }      .noTopSpan{        font-size:14px;      }    }    .topNode{      height:55px;      line-height: 55px;      font-size:16px;      cursor: pointer;    }    .active{      background:#2B9EEE;      color:#fff;    }    .noTopNode{      height:45px;      line-height:45px;      &:hover{        background:#2B9EEE;        cursor: pointer;        color:#fff;      }    }  }}

{  "code":1,  "data":[    {      "id":"1.2",      "name":"技術部",      "userList":[        {          "id":"788d",          "username":"html",          "role":"主管"        },        {          "id":"sda",          "username":"vue",          "role":"普通"        }      ]    },    {      "id":"1.3",      "name":"策劃部",      "userList":[        {          "id":"dsf",          "username":"jack",          "role":"主管"        },        {          "id":"asdf",          "username":"rose",          "role":"普通"        }      ]    }  ]}