递归组件—树形结构效果

递归组件treeMenu ：

<template>
  <div class="mylistBox">
    <div class="listOne" @click="toggle">
      <div class="tiNum">{{ind+1||''}}</div>
      <div class="tiName" :style="indent">
        <div class="tiMac" v-if="hasChild">
          <img class="img1" src="../assets/images/icon-down.png" v-if="open" alt="">
          <img class="img2" src="../assets/images/icon-r.png" v-else alt="">
        </div>
        <span>{{ model.name||'--' }}</span>
      </div>
      <div class="tiImg"><img class="userHead" :src="model.headimg?model.headimg:'../assets/images/headimg.png'" alt=""></div>
      <div class="tiGrade">{{ model.level }}级</div>
      <div class="tiCode">{{model.account}}</div>
      <div class="tiPhone">{{ model.phone }}</div>
      <div class="tiReplace"><span class="replace" @click.stop="replace(model.account)">替换</span></div>
    </div>
    <div v-show="open" v-if="hasChild" class="newlistbox">
      <tree-menu v-for="(item,index) in model.children" v-bind:model="item" v-bind:key="index" :depth="depth + 1" @replace="replace2"></tree-menu>
    </div>
  </div>

</template>

<script type="text/javascript">
  var numData=0;
  export default {
    // 组件递归必要条件，name属性
    name: "treeMenu",
    props: ['model','ind', 'depth' ],
    data() {
      return {
        open: false,
        isFolder: true,
      }
    },
    computed: {
      hasChild(){
        return this.model.children && this.model.children.length
      },
      indent() {
        return { transform: `translate(${this.depth * 50}px)` }
      },
    },
    methods: {
      toggle(){
        if(this.hasChild){
          this.open = !this.open
        }
      },
      replace(account){
        this.$emit('replace',account);
      },
      replace2(account){
        this.$emit('replace',account);
      }
    },
    created(){
      //将isFolder放在这里判断可以识别出最底层菜单，然后改变图标，放在computed的话会一直报错并识别不出最底层菜单改变样式
      this.isFolder = this.model.children && this.model.children.length;
    }
  }
</script>
<style scoped>
  .tiNum{
    width: 5%;
  }
  .tiName{
    width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .tiImg {
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tiImg img{
    width: 46px;
  }
  .tiGrade{
    width: 10%;
  }
  .tiCode{
    width: 15%;
  }
  .tiPhone{
    width: 15%;
  }
  .tiReplace{
    width: 15%;
  }
  .tiMac{
    width: 20px;
    font-size: 20px;
    color: #999;
    /*margin-left: -20px;*/
  }
  .img1{
    width: 15px;
    height: 10px;
  }
  .img2{
    width: 10px;
    height: 15px;
  }
  .replace{
    display: block;
    width: 68px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #999999;
    border-radius: 10px;
  }
  .mylistBox{
    width: 100%;
  }
  .newlistbox{
    box-sizing: border-box;
  }
  .listOne{
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size:14px;
    font-weight:400;
    color:#525252;
    line-height:60px;
    border-bottom: 1px solid rgba(217,217,217,1);
    box-sizing: border-box;
  }
  .listOne div{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:14px;
    font-weight:400;
  }
</style>

使用用法：

<template>
   <div>
     <div v-for="(item,index) in myTeList">
        <tree-grid :model="item" :ind="index" :depth="0" @replace="showPop"></tree-grid>
     </div>
   </div>
</template>
<script>
  import TreeGrid from '@/components/treeGrid.vue';

  export default {
    name: 'personalcenter',
    components:{ TreeGrid:TreeGrid },
    data() {
      return {
         myTeList:[{
            account: 84727367
            children: [{
                account: 84727367
                children: []
                headimg: "http://dist.51204433.com/uploads/face/headimg.png"
                id: 15
                level: 0
                name: null
                phone: "15502363579"
                team_pid: 2
            }]
            headimg: "http://dist.51204433.com/uploads/face/headimg.png"
            id: 15
            level: 0
            name: null
            phone: "15502363579"
            team_pid: 2
         }],
      }
    }
  }
</script>

效果图：

image.png