enhanced el tree

향상된 엘 트리

element-ui의 트리 구성 요소를 기반으로 유용한 기능과 horizontal-mode 추가합니다.

선물

수평 모드

또는 다중 캐스케이더 구성요소라고 할 수 있습니다. 데모를 사용해 보세요.

제한 : horizontal mode 사용할 때 일부 원본 트리 속성은 적용되지 않습니다(예: 들여쓰기 , 아코디언 등).

추가 속성

기인하다	설명	유형	허용되는 값	기본
수평의	수평 모드 활성화 여부	부울	-	거짓
트리 노드 래퍼 클래스	수평 모드를 활성화할 때 수평 블록 래퍼에 이 클래스를 추가하세요.	끈	-	-
확인 시 열림	클릭 트리 노드처럼 동작하려면 확인란을 클릭하세요.	부울	-	거짓

추가로 유용한 방법

이름	설명	매개변수
getAllCheckedKeys	getCheckedKeys 와 비슷하지만 불확실한 노드를 포함합니다.
getAllCheckedNodes	getCheckedNodes 와 비슷하지만 불확실한 노드를 포함합니다.
setCheckedNodes정확하게	일반적으로 트리의 원래 상태를 복원하기 위해 getAllCheckedNodes 와 함께 사용됩니다.	getAllCheckedKeys 에서 가져온 노드 배열
setCheckedKeys정확하게	일반적으로 트리의 원래 상태를 복원하기 위해 getAllCheckedKeys 와 함께 사용됩니다.	getAllCheckedKeys 에서 가져온 키 배열
getCheckedKeysWithoutChild	모든 하위 검사 노드를 제외하고 검사된 노드를 가져옵니다. 아래 예를 살펴보세요.
getCheckedNodesWithoutChild	같게

getCheckedKeysWithoutChild 예:

 /**
 *
 * @example
 *  level1 - intermediate
 *    level1.1 - checked
 *      level1.1.1 - checked
 *      level1.1.2 - checked
 *    level1.2 - checked
 *    level1.3 - intermediate
 *      level1.3.1 - checked
 *      level1.3.2 - not checked
 *    level1.4 - not checked
 *  level2 - checked
 *
 *  getCheckedKeysWithoutChild() will return [level2, level1.1, level1.2, level1.3.1]
 */ 

설치

$ npm install @xlaoyu/enhanced-el-tree -D

용법

 < template >
  < enhanced-el-tree horizontal > </ enhanced-el-tree >
</ template >

< script >
import EnhancedElTree from '@xlaoyu/enhanced-el-tree' ;

// component constructor
{
  name : 'FooComponent' ,
  components : {
    EnhancedElTree
  }
}
</ script > 

덴펜시스

[email protected]

요소@2.2.1

특허

MIT@xlaoyu