집 > 기사 > 웹 프론트엔드 > Vue에서 트리 뷰 데이터를 구현하는 단계에 대한 자세한 설명

Vue에서 트리 뷰 데이터를 구현하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-12 11:17:202324검색

이번에는 Vue에서 트리 뷰 데이터를 구현하는 단계에 대해 자세히 설명하겠습니다. Vue에서 트리 뷰 데이터를 구현하는 데 있어 주의 사항은 무엇입니까?

시뮬레이션된 트리맵 데이터입니다

let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 }

코드는 다음과 같습니다

treelist.vue

<template> 
<p> 
 <ul> 
  <li > 
   <span @click="isshow()">{{treelist.name}}</span> 
    <tree v-for="item in treelist.children"  
     v-if="isFolder" 
     v-show="open" 
     :treelist="item" 
     :keys="item" 
    ></tree> 
  </li> 
 </ul> 
</p> 
</template> 
<script> 
export default { 
 name:'tree', 
 props:['treelist'], 
 data(){ 
  return{ 
   open:false 
  } 
 },computed:{ 
  isFolder:function(){ 
   return this.treelist.children 
   } 
  } 
 ,methods:{ 
  isshow(){ 
   if (this.isFolder) { 
    this.open =!this.open 
   } 
  } 
 } 
} 
</script> 
<style lang="less"> 
</style>

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>树形图</title> 
</head> 
<body> 
 <p id="app"> 
  <tree :treelist="treeList"></tree> 
   
 </p> 
</body> 
</html>

index.js

import Vue from 'vue'; 
import tree from '../components/treelist.vue' 
let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 } 
const app=new Vue({ 
 el:"#app", 
 components:{ 
  'tree':tree 
 }, 
 data:{ 
  treeList:all 
 } 
})

우여곡절 끝에 Vue 공식 홈페이지를 발견했습니다. 비슷한 케이스가 있는데, 링크 → 포탈

공식홈페이지에 있는 방법을 참고해서 구현해보았습니다

이렇게 쓴 것과 제가 함정을 밟았을 때의 생각의 차이는 그런 컴포넌트는 오로지 책임만 진다는 것입니다. 하나의 object에 대해 각 자식을 순회합니다. 처리를 위해 개체가 하나씩 구성 요소에 전달되는데, 첫 번째 시도는 여러 개체를 처리하는 구성 요소입니다. 첫 번째 시도는 관심이 있으시면 하단을 참조하십시오)

객체를 처리하기 위해 이러한 구성 요소를 작성하면 어떤 이점이 있습니까?

구성 요소에서 스위치를 사용자 정의할 수 있습니다.

변수 open을 정의했습니다. 컴포넌트는 재귀적이기 때문에 내 자신의 open

에 속하는 속성을 갖는 각 컴포넌트와 동일합니다. 그러면 첫 번째 시도에서 이 방법을 사용할 수 없는 이유는 무엇입니까? 컴포넌트를 사용하여 여러 객체를 처리하는 것이었는데, 이는 모든 하위 객체를 제어하는 스위치와 동일합니다. 객체, 스위치를 켜면 이 동일한 수준의 모든 객체가 확장됩니다

하위 객체를 탐색하여 컴포넌트를 전달합니다. v-show를 사용하여 표시 여부 제어

계산된

속성

정의 tagopen 값 변경

<span @click="isshow()">{{treelist.name}}</span>

효과 달성

다음은 저입니다 처음 해보고 막혔어요여기서 기록하고 만나면 감동을 남겨주세요 앞으로도 비슷한 문제가 발생합니다

처음 왔을 때 이런 오류가 발생했습니다

오랜 시간 동안 문제를 찾아본 결과, 안에 이름을 쓰는 것을 잊어버린 컴포넌트 때문이라는 것을 알게 되었습니다. 사용할 때 반드시 이름을 입력해야 하며, 태그 이름과 일치해야 합니다

초기 구현 방법은 컴포넌트 재귀를 사용하여 현재 레벨의 이름을 표시하고 렌더링한 후 자식을 넣습니다. 모든 객체를 자신에게 전달한 다음 어린이에게 데이터가 없을 때까지 동일한 작업을 수행합니다.

여기에 v-if를 추가하지 않으면 무한 루프가 됩니다. 계속 실행되므로 현재 실행 중인 객체에 다음 레벨이 있는지 판단해야 합니다

여기서 데이터가 약간 변경되었으므로 제가 전달한 첫 번째 데이터는 (index.html 페이지)

입니다.

그런 다음 각 레이어의 닫기 및 열기를 처리하는 이벤트를 정의하여 Isopen의 값이 변경되었는지 확인했습니다

결과를 살펴보겠습니다

처음 페이지에 들어왔을 때 괄호 안의 정의되지 않은 값이 아이소펜의 현재 값이었습니다. 이때는 정의되지 않았기 때문에 정의되지 않았습니다

그럼요. A를 눌렀습니다

isopen이 이때 반전되었으므로 isopen은 이때 true입니다

하지만 페이지에는 여전히 아무런 변화가 없고 확장 기능은 말할 것도 없고 undefound도 변하지 않았습니다

Baidu를 검색한 후 Vue 자체는 더 이상 Props에서 받은 값을 직접 변경할 수 없다는 사실을 알게 되었습니다. 이 기사의 사례를 읽은 후에는 이 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!