element-ui 패키지 기반 검색 가능 한 게 으 른 트 리 구성 요소 구현

머리말
최근 개발 프로젝트 에서 하나의 수 요 는 tree 방식 으로 만 단위 의 데 이 터 를 보 여 주 는 것 이다.데이터 양 이 많 으 면 첫 번 째 반응 은 바로'게 으 른 로드'방식 으로 이 루어 지기 때문에 사용자 가 방대 한 데이터 양 에서 특정한 노드 검색 기능 을 신속하게 찾 는 데 편리 하도록 하 는 것 도 필수 적 이다.'게 으 른 불 러 오기'데 이 터 를 사용 하기 때문에 검색 도 당연히 원 격 검색 입 니 다.수 요 를 확 정 했 습 니 다.물론 인터넷 에서 파트너 가 있 는 지 없 는 지 를 찾 아 관련 구성 요 소 를 실 현 했 습 니 다.마지막 으로...............................................................이것 은 단지 자신 이 실현 한 사고 일 뿐 이 니,여러분 들 이 많이 지적 해 주시 기 바 랍 니 다.
1.게 으 른 트 리 구현
처음에 엘 트 리 가 직접 가지 고 있 는 게 으 른 로드 방식 을 사용 하려 고 했 으 나 실현 과정 에서 엘 트 리 가 게 으 른 로드 를 사용 한 후에 나무 노드 를 펼 치지 않 은 것 을 발견 했다.이것 은 분명 통 하지 않 는 다.아무리 생각해 도 게 으 름 피 우 면 노드 를 펼 칠 때 데 이 터 를 불 러 오 는 것 이 아 닙 니까?저 는 비 lazy 형식 으로 스스로 제어 하면 됩 니 다.그래서 다음 과 같은 실현 이 있 습 니 다.

//       
const treeData = [
 {
  label: '  1',
  id: '1',
  children: [] //                       
 },
 {
  label: '  2',
  id: '2'
 }
]

위의 데 이 터 를 받 은 후에 저 는 데 이 터 를 처리 하여 전개 할 때 서브 노드 데 이 터 를 불 러 올 것 입 니 다.구체 적 으로 다음 과 같 습 니 다.

//             
const treeData = [
 {
  label: '  1',
  id: '1',
  children: [
   //        _state_         ，          
   //_state_ = 1,             ，            
   //       id，    el-tree  node-key，        ，   elementUI  
   {id: '1-test', '_state_': 0}
  ] //                       
 },
 {
  label: '  2',
  id: '2'
 }
]

데이터 삽입

노드 를 펼 칠 때 데 이 터 를 얻 고 전개 점 에 삽입 하 는 것 을 얻 으 면 el-tree 가 대응 하 는 방법 을 제공 합 니 다.
여기까지 게 으 른 로드 트 리 는 거의 다 만 들 었 어 요.
2.원 격 검색 실현
원 격 검색 상 자 는 주로 el-select 의 원 격 검색 기능 을 사용 합 니 다.여 기 는 군말 하지 않 습 니 다.주로 선택 한 id 를 검색 하여 얻 은 데 이 터 를 검색 하고 트 리 노드 를 삽입 하 는 방식 을 소개 합 니 다.
요구 데이터 형식

const nodeData = {
 label: '  1', //      
 id: '1',
 children: [
  {label: '  1-1', id: '1-1', chilrend: []},
  {label: '  1-2', id: '1-2', chilrend:[]} //     id   
 ]
}

돌아 오 는 데 이 터 는 바로 당신 이 얻 으 려 는 노드 id 의 형제 노드 와 부모 노드 의 모든 형제 노드 를 순서대로 유추 하여 이 노드 의 뿌리 노드 까지 하 는 것 입 니 다.약간 돌아 가 는 것 처럼 들 리 지만 이 노드 를 펼 친 후 모든 면 의 노드 를 머리 로 보충 할 수 있 습 니 다.
트 리 에 데 이 터 를 삽입 합 니 다.

이 세 대 는 먼저 데이터 와 로 컬 데 이 터 를 비교 합 칩 니 다.(처음에 디자인 할 때 합병 되 지 않 았 습 니 다.직접 교체 하 는 방식 을 사용 합 니 다.이 트 리 를 바탕 으로 드 롭 다운 선택 구성 요 소 를 실현 해 야 하기 때 문 입 니 다.[드 롭 다운 트 리 구성 요소 에 관심 이 있 으 면 메 시 지 를 남 길 수 있 습 니 다.제 생각 을 공유 하 겠 습 니 다.상대 적 으로 이 구성 요소 의 패키지 보다 복잡 도가 높 습 니 다]기본 값 설정 문 제 를 여러 번 선택 하여 통합 처리 방식 으로 바 꾸 는 것 을 지원 합 니 다.비교 합병 은 많은 시간 이 필요 하지 않 습 니 다.새로운 데 이 터 는 한 노드 만 로 컬 데이터 와 다 를 수 있 기 때문에 빠 릅 니 다)그리고 로 컬 에 데 이 터 를 삽입 해 야 하 는 노드 를 찾 아 삽입 을 실행 하면 됩 니 다.
3.효과 도 전시

결어
이것 은 제 개인 이 업무 에 대한 해결 방식 일 뿐 존재 하 는 부족 한 점 은 여러분 이 많이 지적 해 주시 기 바 랍 니 다.그리고 여러분 의 격려 를 받 아 저 로 하여 금 전방 의 길에서 계속 발전 하도록 노력 하 겠 습 니 다:grinning:.
참조 링크
Vue
element-ui
element-ui 패 키 징 을 기반 으로 검색 가능 한 게 으 른 트 리 구성 요소 의 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 요소 들 은 게 으 른 트 리 내용 을 검색 할 수 있 습 니 다.이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!