VUE 무한 계층 트 리 데이터 구조 디 스 플레이 구현
글 에 사 용 된 데 이 터 는 다음 과 같다.
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 무한 계층 트 리 구조 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
VUE 기반 장치가 PC인지 모바일 포트인지 판단실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.