enhanced el tree

árbol-el-mejorado

Basado en el componente de árbol de element-ui, agregue alguna función útil y horizontal-mode

Futuros

Modo Horizontal

O se puede decir que es un componente de múltiples cascadas. Pruébelo Demostración

restringir : cuando se usa horizontal mode , algunas propiedades del árbol de origen no surtirán efecto, por ejemplo: sangría , acordeón , etc.

Atributos adicionales

Atributo	Descripción	Tipo	Valores aceptados	Por defecto
horizontal	si activar el modo horizontal	Booleano	-	FALSO
clase contenedora de nodo de árbol	agregue estas clases al contenedor de bloque horizontal cuando active el modo horizontal	Cadena	-	-
abrir cuando comprobar	haga clic en la casilla de verificación para comportarse como un nodo de árbol de clics	Booleano	-	FALSO

Métodos extra útiles

Nombre	Descripción	Parámetros
obtener todas las claves marcadas	como getCheckedKeys pero incluye nodos indeterminados
getAllCheckedNodes	como getCheckedNodes pero incluye nodos indeterminados
setCheckedNodesPrecisely	Generalmente se usa con getAllCheckedNodes para restaurar el estado original del árbol.	una serie de nodos se obtienen de getAllCheckedKeys
setCheckedKeysPrecisely	Generalmente se usa con getAllCheckedKeys para restaurar el estado original del árbol.	una serie de claves obtenidas de getAllCheckedKeys
getCheckedKeysSinNiño	obtenga el nodo marcado excepto todos los nodos secundarios marcados, mire el siguiente ejemplo
getCheckedNodesWithoutChild	ídem

Ejemplo de 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]
 */ 

Instalación

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

Uso

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

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

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

Denpencics

[email protected]

[email protected]

Licencia

MIT @xlaoyu