vuejs 는 귀속 구성 요 소 를 사용 하여 트 리 디 렉 터 리 를 실현 하 는 방법

위의 글 에서 저 는 통신 록 의 개발 을 언급 했 습 니 다.안의 디 렉 터 리 는 vue 의 재 귀 구성 요소 로 이 루어 진 트 리 디 렉 터 리 를 사 용 했 습 니 다.이 글 은 트 리 디 렉 터 리 를 어떻게 실현 하 는 지 설명 하 겠 습 니 다!
우선 실현 효 과 는 다음 과 같 습 니 다.메뉴 가 좋 은 것 같 습 니 다.그 렇 죠?

이 데 이 터 는 데이터 베 이 스 를 호출 하 는 데이터 입 니 다.데이터 베 이 스 를 데이터 로 구성 해 야 합 니 다.여 기 는 자바 의 구조 다 진 트 리 지식 과 관련 되 어 있 습 니 다.나중에 저 는 따로 글 을 써 서 상세 하 게 설명 하 겠 습 니 다.여기 서 전단 을 말씀 드 리 겠 습 니 다.
데 이 터 는 json 을 먼저 구성 하여 사용 할 수 있 습 니 다.여기 서 사용 하 는 형식 은 다음 과 같 습 니 다.childList 로 세트 메뉴 를 삽입 합 니 다.

{
  id：YH, 
  name：  , 
  pid：0, 
  childList：[{
    id:YH******, 
    name:      , 
    pid:YH, 
    childList:[{
      id:YH*****3, 
      name:          , 
      pid:YH******, 
      childList:[]
    }, 
    {
      id=YH*****1, 
      name=           , 
      pid=YH******, 
      childList=[]
    }, {
      id=YH*****2, 
      name=          , 
      pid=YH******, 
      childList=[]
    }
  ]}
}

사고방식 에 따 르 면 우 리 는 l 안에 li,li 안에 l 을 끼 워 넣 어야 한다.이렇게 무한 한 끼 워 넣 기 때문에 하위 구성 요소 에 이렇게 쓴다.

 <li>
  <div>
   <i @click='toggle' v-if='isFolder' class="mui-icon iconfont" :class="[open?'icon-wenjianjia':'icon-wenjianjiaguanbi']"></i>
   <!--isFolder            -->
   <i @click='toggle' class="mui-icon iconfont icon-wenjian" style="color: #00ccff" v-else></i>
   <!--              ，         -->
   <span @click="propInstCode(model);propInstName(model)">
    {{model.name}}
   </span>
  </div>
  <ul v-show="open" v-if='isFolder'>
   <tree-menu v-for='cel in model.childList' :model='cel'></tree-menu>
  </ul>
 </li>

공식 문서 에서 name 속성 을 강 조 했 기 때문에 우 리 는 처음에 name 을 정의 해 야 합 니 다.여기 name 은 위의 tree-menu 를 사용 합 니 다.

export default {
  name: 'treeMenu',
  props: ['model'],
  components: {}
}

vue 의 사상 에 따라 Dom 트 리 를 조작 하지 않 습 니 다.우 리 는 두 변 수 를 정의 합 니 다.하 나 는 숨겨 진 하위 메뉴(open)를 표시 하고 하 나 는 저장 되 지 않 은 하위 메뉴 수정 아이콘(isFolder)을 표시 합 니 다.

data() {
   return {
    open: false,
    isFolder: true,
   }
 },

저 는 한 편의 글 을 참조 하여 작 성 했 습 니 다.이 단계 에서"vue 계산 속성 을 이용 하여 isFolder 의 값 을 동적 으로 바 꾸 고 아이콘 을 수정 하여 하위 급 과 하위 급 길이 가 존재 하 는 지 판단 합 니 다"라 고 말 했 습 니 다.

computed: {
  isFolder() {
    return this.model.childTreeNode && this.model.childTreeNode.length
  }
}  

여기 서 문제 가 생 겼 습 니 다.계속 오 류 를 보고 할 것 입 니 다.

오랫동안 문 제 를 찾 았 는데 결국 저 는 이렇게 해 결 했 습 니 다.coptute d 의 계산 속성 을 제거 하고 created 에 넣 었 습 니 다.

created(){
   // isFolder                ，      ，  computed                     
   this.isFolder = this.model.childList && this.model.childList.length;
  }

이벤트 보이 기/숨 기기

methods: {
   toggle: function() {
    if(this.isFolder){
     this.open = !this.open;
    }
   },
}

여기까지 트 리 디 렉 터 리 의 구성 요 소 를 만 들 었 습 니 다.해당 부모 구성 요소 에서 호출 하면 됩 니 다.전체 코드 는 다음 과 같 습 니 다.
부모 구성 요소 참조

<ul class="tree_container" v-for="item in list">
  <my-menu-tree :model='item' :instType='this.instType'></my-menu-tree>
</ul>

하위 구성 요소:

<template>
 <li>
  <div>
   <i @click='toggle' v-if='isFolder' class="mui-icon iconfont" :class="[open?'icon-wenjianjia':'icon-wenjianjiaguanbi']"></i>
   <!--isFolder            -->
   <i @click='toggle' class="mui-icon iconfont icon-wenjian" style="color: #00ccff" v-else></i>
   <span @click="propInstCode(model);propInstName(model)">
    {{model.name}}
   </span>
  </div>
  <ul v-show="open" v-if='isFolder'>
   <tree-menu v-for='cel in model.childList' :model='cel'></tree-menu>
  </ul>
 </li>
</template>
<script type="text/javascript">
 import {bus} from '../../bus.js'
 export default {
  name: 'treeMenu',
  props: ['model','instType'],
  components: {},
  data() {
   return {
    open: false,
    isFolder: true,
   }
  },
  computed: {
  },
  methods: {
   toggle: function() {
    if(this.isFolder){
     this.open = !this.open;
    }
   },
   //           
   propInstCode:function (model) {
    //$emit        
     bus.$emit('custTreeSay',this.model.id);
   },
   propInstName:function (model) {
    bus.$emit('custTreeSayName',this.model.name);
   }
  },
  created(){
   // isFolder                ，      ，  computed                     
   this.isFolder = this.model.childList && this.model.childList.length;
  }
 }
</script>

<style lang="less" rel="stylesheet/less" scoped>
 ul {
  list-style: none;
  padding-left: 20px;
 }
 ul li{
  list-style: none;
 }
 a{
  color: #404040;
  //text-decoration: underline;
 }
 i.icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  vertical-align: middle;
 }
 i{
  opacity: 0.8;
  color: #f0ad4e;
 }
 .tree-menu li {
  line-height: 1.5;
 }
</style>

하위 구성 요 소 는 직접 사용 할 수 있 고 스타일 도 함께 붙 일 수 있 습 니 다.그러나 부모 구성 요소 에 도 스타일 이 있 습 니 다.이 완전한 코드 에는 상기 글 에서 언급 한 구성 요소 의 전송 값 부분 도 포함 되 어 있 습 니 다.
제 icon 은 아 리 의 iconformat 를 사용 하고 있 습 니 다.여러분 도 바 이 두 에서 찾 아 보 세 요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.