VUE 무한 계층 트 리 데이터 구조 디 스 플레이 구현

프로젝트 를 할 때 트 리 모양 의 데이터 구 조 를 만 날 수 있 습 니 다.왼쪽 메뉴 내 비게 이 션 이나 댓 글 참조 등에 자주 사 용 됩 니 다.이런 데이터 구 조 는 몇 층 이 들 어 갈 지 모 르 는 특징 이 있 기 때문에 template 으로 이런 데 이 터 를 보 여 주 는 것 이 까다 롭 습 니 다.이 글 은 이러한 데이터 구 조 를 보 여 주 는 두 가지 방법 을 정리 합 니 다.
글 에 사 용 된 데 이 터 는 다음 과 같다.

mainData: {
  value: "root",
  children:[{
    value: "  1-1",
    children:[{
      value: "  2-1",
      children:[{
          value: "  3-1",
          children:[]
       }]
     },{
       value: "  2-2",
       children:[]
     }]
   },{
      value: "  1-2",
      children:[]
   }]
}

바로 아래 이렇게.

모듈 재 귀적 호출
첫 번 째 는 구성 요소 가 재 귀적 으로 자신 을 호출 하 는 방식 입 니 다.구성 요 소 를 만 듭 니 다.이 구성 요 소 는 자신 이 children 의 데 이 터 를 보 여 주 는 것 을 참조 하고 있 습 니 다.하위 구성 요 소 는 다음 과 같 습 니 다.

<template>
<div>
  <div class="demo">
    {{treeData.value}}
    <tree-comp v-for="(item, index) in treeData.children" :treeData="item"></tree-comp>
  </div>
</div>
</template>
<script>
export default {
  name: 'treeComp',
  props:{
    treeData: {
      default: function(){
        return {}
      }
    }
  },
  mounted(){},
  methods:{}
}
</script>
<style lang="less" scoped>
  .demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999;
    &:before{content:'--';display: inline-block;padding:0 4px;}
  }
</style>

그리고 부모 구성 요 소 를 만 듭 니 다.부모 구성 요 소 는 하위 구성 요 소 를 사용 하고 데 이 터 를 하위 구성 요소 에 전달 합 니 다.

<template>
  <tree-comp :treeData="mainData"></tree-comp>
</template>
<script>
export default {
  name: 'treeMain',
  data () {
    return {
      mainData: {
        value: "root",
        children:[
          {
            value: "  1-1",
            children:[{
              value: "  2-1",
              children:[{
                value: "  3-1",
                children:[]
              }]
            },{
              value: "  2-2",
              children:[]
            }]
          },{
            value: "  1-2",
            children:[]
          }
        ]
      }
    }
  },
  components:{
    "tree-comp": () =>  import('./TreeComp')
  },
  mounted(){},
  methods:{}
}
</script>

재 귀 구성 요소 에 관 한 내용 은 공식 문서 에서 언급 되 었 습 니 다->재 귀 구성 요소
render 방법 사용 하기
구성 요 소 를 사용 하 는 방식 외 에 vue 의 render 방법 을 사용 하여 자바 스 크 립 트 의 완전 프로 그래 밍 능력 을 이용 하여 트 리 데 이 터 를 재 귀적 으로 처리 하여 무한 한 등급 의 트 리 를 보 여 줍 니 다.다음 과 같다.

<template>
  <tree-comp :treeData="mainData"></tree-comp>
</template>
<script>
export default {
  name: 'treeRender',
  data () {
    return {
      mainData: {
        value: "root",
        children:[
          {
            value: "  1-1",
            children:[{
              value: "  2-1",
              children:[{
                value: "  3-1",
                children:[]
              }]
            },{
              value: "  2-2",
              children:[]
            }]
          },{
            value: "  1-2",
            children:[]
          }
        ]
      }
    }
  },
  components:{
    treeComp:{
      functional: true,
      props: {treeData: Object},
      render(h, {props: {treeData = {}}}) {
        const creatNode = (node)=>{
          if(node.children && node.children.length > 0){
            let hArr = node.children.map(item=>{
              return creatNode(item)
            })
            return h('div', {class:'demo'}, [node.value, hArr])
          }else{
            return h('div', {class:'demo'}, [node.value])
          }          
        }
        return creatNode(treeData)
      },
    }
  },
  mounted(){},
  methods:{}
}
</script>
<style lang="less" scoped>
  .demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999;
    &:before{content:'--';display: inline-block;padding:0 4px;}
  }
</style>

그 중에서 가장 핵심 적 인 것 은 render 방법 에서 creatNode 방법 은 재 귀적 인 방식 으로 깊이 가 트 리 데 이 터 를 우선 옮 겨 다 니 며 vnode 를 생 성 한 다음 에 페이지 를 보 여 주 는 것 이다.
VUE 무한 계층 트 리 데이터 구조 디 스 플레이 의 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 VUE 무한 계층 트 리 구조 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!