看下結(jié)果

當(dāng)然我用的全局組件，如果用vue-cli搭建的環(huán)境是一樣的，引入組件就可以了，但是一定要注意，組件內(nèi)必須要用name屬性，而且name的名稱要和組件名稱（組件標(biāo)簽名稱）一致才可以

貼一個(gè)項(xiàng)目中用的模板吧，相當(dāng)于做筆記了

  .dataBaseTree{
    padding-left:12%;
    line-height:40px;
    ul{
      padding-left:12%;
      line-height:40px;
      li{
        span{
          display:inline-block;
          padding-left:23%;
          height:100%;
          width:120%;
          color:#ababab;
          font-size:14px;
          position: relative;
          cursor: pointer;
          &:hover{
            background: #EDF0F5;
          }
          .folderIcon{
            color:#BCBCBC;
            position: absolute;
            top:-1px;
            left:22px;
          }
        }
      }
    }
    li{
      position: relative;
      span{
        display:inline-block;
        padding-left:40px;
        font-size:14px;
        height:100%;
        width:120%;
        cursor: pointer;
        position: relative;
        right:25px;
        top:-2px;
        color:#ababab;
        &:hover{
          background: #EDF0F5;
        }
        .titleIcon{
          color:#C3C3C3;
          font-size:16px;
          position: absolute;
          top:12px;
          left:16px;
        }
        .folderIcon{
          color:#BCBCBC;
          position: absolute;
          top:-1px;
          left:22px;
        }
      }
      .active{
        background: #EDF0F5;
      }
    }
  }

vue版的就到這里了

 下面貼一個(gè)原生js版的，感興趣的小伙伴可以繼續(xù)往下看

上述內(nèi)容就是怎么在vue中利用遞歸組件實(shí)現(xiàn)一個(gè)樹形控件，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。