Vue2.x를 사용하여 JSON 트리를 구현하는 방법

이 글에서는 주로 Vue2 사용에 관한 정보를 소개합니다.

최근 직장에서 요구 사항이 발생했습니다. 프로젝트에 JSON 문자열을 구문 분석하고 JSON 트리를 생성하는 기능이 필요했기 때문에 GitHub에서 적합한 구성 요소를 찾을 수 없었습니다. , 그래서 Vue2.X를 기반으로 JSON 트리 구성 요소를 작성했습니다. 주요 원리는 Vue의 재귀 구성 요소를 사용하여 깊이 우선 선주문 탐색을 수행합니다. 이 구성 요소는 읽을 수 없는 JSON 문자열을 읽을 수 있는 트리 구조로 변환할 수 있을 뿐만 아니라 특정 하위 트리에서 데이터를 캡처하는 데에도 사용할 수 있습니다. Github 소스 코드

Github-Page
구성 요소는 템플릿 내에서 자신을 재귀적으로 호출할 수 있습니다. 그러나 이는 이름 옵션이 있는 경우에만 수행할 수 있습니다.

• 문자열 데이터 미화 기능:

특정 레벨 데이터 캡처 기능:

<tree
 :parent-data="data"
 :data="item"
 :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
 :path-checked="pathChecked"
 :path-selectable="pathSelectable"
 :selectable-type="selectableType"
 :index="index"
 :child="true"
 @click="handleItemClick">
</tree>

부모 데이터를 통해 부모 전달 자식의 데이터가 전달됩니다. 하위 트리의 데이터가 단순 유형인 경우 더 이상 재귀가 입력되지 않습니다. 동시에 컴포넌트는 특정 노드의 트리 데이터와 자식의 데이터를 얻기 위해 클릭 이벤트를 제공합니다. 통과됨 재귀 메커니즘은 "버블 메커니즘"과 유사하게 다음 단계로 계속해서 전달됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

vue에서 ueditor를 사용하는 방법

React Native를 사용하여 사용자 정의 컨트롤 하단 서랍 메뉴를 구현하는 방법

vue에서 ref를 사용하여 상위 구성 요소가 하위 구성 요소를 호출하도록 합니다

구현 방법 웹 프런트 엔드 페이지에서 exe를 생성합니다

Ajax 프런트 엔드 및 백엔드 교차 도메인 요청을 구현하는 방법

위 내용은 Vue2.x를 사용하여 JSON 트리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!