복잡한 레이아웃 구조, 트리 구성 요소와 통합된 테이블 구성 요소, 각 노드는 하나의 행을 나타냅니다.

서 문 .

이 문서 에서는 트 리 구성 요소 가 테이블 구성 요소 를 통합 하는 비교 적 복잡한 타이 포 그래 피 를 소개 합니다 . 트 리의 각 노 드는 한 줄 구 성을 가지고 있습니다 .
제품 비교 페이 지는 다음과 같습니다 .

요구 사항 분석

이 페이 지를 보면 , 우리가 생각하는 첫 번째 것은 트 리 구성 요소 와 테이블 구성 요소 입니다 .
오른쪽 을 테이블 구성 요소 로 생각 하면 앉 는 것이 비교 적 복 제 됩니다 .트 리 노 드의 축 소 와 관련 되어 있기 때문에 해당 행 도 축 소 됩니다 .
따라서 가장 간단한 방법은 오른쪽 의 테이블 을 시 뮬 레이 션 하고 각 행 을 트 리 노 드에 쓰는 것입니다 .따라서 노 드를 축 소 하면 해당 행 도 축 소 됩니다 .

코드 구현

맨 위의 헤 더 는 오른 쪽으로 오 프 셋 된 별 도의 div 구현 입니다 .

<div class = " top - he ader ">
  <div class = " col - item ">
    행 개 수
  </ div>
  <div class = " col - item ">
    열 개 수
  </ div>
  <div class = " col - item ">
    사용자 정의 SQL
  </ div>
  <div class = " col - item ">
    신선 함 F resh ness
  </ div>
  <div class = " col - item ">
    카 디 널 티 (C ardin alism)
  </ div>
  <div class = " col - item ">
    고유 성 (Uni quen ess)
  </ div>
  <div class = " col - item ">
    N ull ness
  </ div>
  <div class = " col - item ">
    분 배
  </ div>
</ div>

왼쪽 의 트 리는 element - plus 의 트 리 구성 요소 를 사용하여 표시 됩니다 .
각 노 드는 슬 롯 을 사용하여 작성 해야 하므로 다양한 계 층 에 대해 다른 아이 콘 을 사용하는 것과 같은 많은 논 리를 개별 적으로 처리 할 수 있습니다 .
각 노 드의 셀 수 를 개별 적으로 설정 할 수 있습니다 .
셀 수 는 CSS 클래 스를 사용하여 구현 되며 , 클릭 할 수 없는 셀 , 배경 색 상이 투 명 으로 설정 되거나 배경 색 상 과 일치 하도록 설정 됩니다 .
각 셀 이 표시 되는 지 여 부 와 표시 되는 색 상은 노 드의 데이터 및 셀 유형 과 관련이 있습니다 .
따라서 셀 의 c ss 클래 스를 가져 오 면 셀 유형 1 과 node 의 두 가지 인 수를 사용합니다 .다음 으로
<div : class = " s how C ell (1, node) " class = " node - rules - cell " />

특히 주목 해야 할 것은 다음과 같습니다 .
나무 에는 각 레벨 이 오른 쪽으로 들여 쓰 는 거 리가 다르 며 다른 레벨 이 있습니다 .책 노 드의 폭 을 달성 하기 위해 후 속 셀 의 타이 포 그래 피 에 영향을 미 치지 않습니다 .
우리는 트 리 노 드의 끝 을 정 렬 해야 하며 , 모든 다른 레벨 의 노 드의 폭 은 동일 하지 않습니다 .
우리는 이렇게 쓸 수 있다 .

@ lev Mar gin : 16 p x ;
. node - info {
  폭 : 340 p x ;
  margin - right : 12 p x ;
  &. node - lev 2 {
    wid th : calc (3 40 p x - @ lev Mar gin) ;
  }
  &. node - lev 3 {
    wid th : calc (3 40 p x - @ lev Mar gin * 2) ;
  }
  &. node - lev 4 {
    wid th : calc (3 40 p x - @ lev Mar gin * 3) ;
  }
}

첫 번째 레벨 노 드의 폭 은 340 p x , 두 번째 레벨 은 340 - 16 이며 세 번째 레벨 노 드의 폭 은 340 - 16 * 2 입니다 .이와 유사 하게 .

일부 세부 사항 은 우리가 노 드의 hov ering , focus 에 대해 몇 가지 최적 화를 해야 한다는 것입니다 .

. el - tree - node _ _ content : h over . node - rules {
  background - color : # ff f ;
}
.el-tree-node:focus
  background - color : # ff f ;
}

데 모 효과