Descarga tree transfer - tree transfer Descarga del código fuente

tree transfer

Otras categorias

1.0.0

Descargar

transferencia-el-arbol

Introducción

el-tree-fransfer es un componente de caja de transporte de árbol basado en VUE y element-ui. ¡Asegúrese de haber introducido element-ui antes de usarlo! La función de este componente es similar al componente de transferencia de element-ui , ¡pero los datos que contiene son una estructura de árbol! De hecho, los componentes de element-ui en los que se basa el-tree-transfer son Checkbox, Button y el control principal del árbol. No es una extensión del componente Shuttle Box de element-ui, sino que simplemente se refiere a su apariencia, estilo y funcionalidad.

Debido a que el negocio de la empresa utiliza el marco Vue, la biblioteca de interfaz de usuario utiliza element-ui. Es difícil encontrar un componente útil de caja de transporte de árbol Vue en el mercado, y no queremos introducir otros complementos pesados fuera de element-ui solo por una caja de transporte, por lo que existe el-tree-transfer. Ligero, fácil de usar, no requiere costos de aprendizaje adicionales.

Dirección del documento - Acceso en línea - GitHub - Nuggets

Actualizaciones importantes

2.4.6 Corrija el error de reconstrucción (no use 2.4.0-2.4.5); agregue tres modos que no estén relacionados con padre e hijo (incluido el modo de autorización) para reconstruir la estructura del directorio de componentes y el rendimiento; de la prueba aproximada de los datos de demostración se ha mejorado enormemente; Optimice la selección de todos cuando el padre y el niño no estén relacionados; El evento addBtn es add-btn y removeBtn es remove-btn; agrega, arrastra y suelta; agrega una ranura de nodo personalizada; corrige que los datos desaparezcan después de seleccionar el cursor izquierdo y derecho dos veces al mismo tiempo; función de lanzadera no asociada entre padres e hijos

2.3.3 Modificar la lógica de coincidencia del transbordador; agregar el parámetro rootPidValue. Consulte las notas de la versión a continuación para obtener instrucciones detalladas.

Comience rápidamente

Primer npm descarga el complemento

npm install el-tree-transfer --save

o

npm i el-tree-transfer -S

Entonces puedes usar el-tree-transfer como un componente normal.

    < template >
      < div >
        // 你的代码
        ...
        // 使用树形穿梭框组件
        < tree-transfer : title = " title " :from_data='fromData' :to_data='toData' :defaultProps=" { label: 'label' } " @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
      </ tree - transfer >
      < / div >
    </ template >

    < script >
      import treeTransfer from 'el-tree-transfer' // 引入

      export defult {
        data ( ) {
          return : {
            mode : "transfer" , // transfer addressList
            fromData : [
              {
                id : "1" ,
                pid : 0 ,
                label : "一级 1" ,
                children : [
                  {
                    id : "1-1" ,
                    pid : "1" ,
                    label : "二级 1-1" ,
                    disabled : true ,
                    children : [ ]
                  } ,
                  {
                    id : "1-2" ,
                    pid : "1" ,
                    label : "二级 1-2" ,
                    children : [
                      {
                        id : "1-2-1" ,
                        pid : "1-2" ,
                        children : [ ] ,
                        label : "二级 1-2-1"
                      } ,
                      {
                        id : "1-2-2" ,
                        pid : "1-2" ,
                        children : [ ] ,
                        label : "二级 1-2-2"
                      }
                    ]
                  }
                ]
              } ,
            ] ,
            toData : [ ]
          }
        } ,
        methods: {
          // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
          changeMode ( ) {
            if ( this . mode == "transfer" ) {
              this . mode = "addressList" ;
            } else {
              this . mode = "transfer" ;
            }
          } ,
          // 监听穿梭框组件添加
          add ( fromData , toData , obj ) {
            // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
            // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
            console . log ( "fromData:" , fromData ) ;
            console . log ( "toData:" , toData ) ;
            console . log ( "obj:" , obj ) ;
          } ,
          // 监听穿梭框组件移除
          remove ( fromData , toData , obj ) {
            // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
            // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
            console . log ( "fromData:" , fromData ) ;
            console . log ( "toData:" , toData ) ;
            console . log ( "obj:" , obj ) ;
          }
        } ,
        components : { treeTransfer } // 注册
      }
    </ script >

    < style >
    ...
    </ style >

documento

número de serie	parámetro	ilustrar	tipo	valor predeterminado	Reponer
1	ancho	ancho	Cadena	100%	Se recomienda establecer el ancho y la posición de la caja exterior.
2	altura	alto	Cadena	320px	-
3	título	título	Cadena	["lista de origen", "lista de destino"]	-
4	texto_botón	nombre del botón	Formación	-	-
5	de_datos	datos de origen	Formación	-	El formato de datos es el mismo que el del componente del árbol element-ui, pero debe tener id y pid.
6	a_datos	datos objetivo	Formación	-	El formato de datos es el mismo que el del componente del árbol element-ui, pero debe tener id y pid.
7	accesorios predeterminados	Elementos de configuración: iguales que los accesorios en el-tree	Objeto	{ etiqueta: "etiqueta", niños: "niños", isLeaf: "hoja", desactivar: "desactivar" }	El uso es el mismo que el de los accesorios de el-tree.
8	clave_nodo	Personalice el valor de node-key, el valor predeterminado es id	Cadena	IDENTIFICACIÓN	Debe ser coherente con el nombre del parámetro id en los datos del árbol y debe ser único.
9	pid	Personalice el nombre del parámetro de pid, el valor predeterminado es "pid"	Cadena	pid	Algunos internautas sugirieron que el nombre de campo proporcionado por el fondo no se llama pid, por lo que se agrega soporte personalizado.
10	solo hoja	abandonado	-	-	-
11	filtrar	Ya sea para habilitar la función de filtrado	Booleano	FALSO	Filtrar según el campo de etiqueta del parámetro defaultProps
12	abrir todo	Ya sea para expandir todo de forma predeterminada	Booleano	FALSO	Hay un problema de rendimiento
13	~~renderizar contenido~~ renderContentLeft, renderContentRight	Nodo de árbol personalizado, el uso es el mismo que el del árbol element-ui	Función	-	La versión 2.2.3 se divide en dos funciones para definir nodos personalizados en los lados izquierdo y derecho respectivamente.
14	modo	Establecer el modo de caja lanzadera	Cadena	transferir	El modo predeterminado es el modo de transferencia, que es el modo de lanzadera de árbol. El campo configurable es AddressList y se puede cambiar al modo de libreta de direcciones. En el modo de libreta de direcciones, el nombre del botón no se puede personalizar. , simplemente pase cuatro valores en la matriz de título. En el modo Lista de direcciones, el título predeterminado es libreta de direcciones, destinatario, persona con copia carbón y persona con copia carbón oculta.
15	transferirOpenNode	Si se deben expandir los nodos del transbordador después del transbordador	Booleano	verdadero	El valor predeterminado es verdadero, lo que significa que el nodo lanzadera se expandirá para la inspección visual. Este parámetro se agrega porque habrá problemas de retraso obvios en la expansión cuando la cantidad de datos sea grande. Sin embargo, tenga en cuenta que si este parámetro se establece en falso. Después de todo, no se expandirá después de todo, es imposible determinar de qué capa se trata. Habrá una gran cantidad de datos.
16	defaultCheckedKeys	Nodo seleccionado por defecto	Formación	FALSO	Solo coincide con el nodo predeterminado inicial y no cambiará dinámicamente el nodo predeterminado después de operarlo.
17	marcador de posición	Establecer indicaciones del cuadro de búsqueda	Cadena	Introduzca palabras clave para filtrar	-
18	predeterminadoTransferir	Si se debe trasladar automáticamente una vez al nodo con defaultCheckedKeys seleccionado de forma predeterminada	Booleano	FALSO	Se utiliza para satisfacer las necesidades de los usuarios que no desean dividir los datos en fromData y toData.
19	matriz al árbol	Ya sea para habilitar la conversión de matrices unidimensionales en estructuras de árbol	Booleano	FALSO	Los datos deben tener un nodo raíz y no estar rotos. Para obtener detalles sobre el formato de datos, consulte app.vue en github. Según la relación correspondiente entre id y pid, existen ciertos problemas de rendimiento al convertir.
20	direcciónOpciones	Elementos de configuración del modo libreta de direcciones	Objeto	{num: Número, sufijo: Cadena, conector: Cadena}	num-> El número de libretas de direcciones requeridas en el lado derecho, el valor predeterminado es 3 sufijo-> El campo que desea unir después de la etiqueta (como id, es decir, tome la identificación de estos datos y empalme en la parte posterior ). El valor predeterminado es conector de sufijo -> conector (cadena) predeterminado-.
veintiuno	perezoso	Ya sea para habilitar la carga diferida	Booleano	FALSO	El efecto es la carga diferida de el-tree y no se puede utilizar al mismo tiempo que openAll o la expansión predeterminada.
Veintidós	perezosoFn	Función de devolución de llamada de carga diferida	Función	-	Cuando se utiliza lazy, se debe pasar la función de devolución de llamada, ejemplo: lazyFn='loadNode', parámetro de retorno loadNode(nodo, resolver, desde), nodo->nodo actualmente expandido, resolver->resolución de carga diferida, desde -> izquierda/derecha Indica que la devolución de llamada proviene del lado izquierdo/derecho
veintitrés	destacar	Si se debe resaltar el nodo actualmente seleccionado	Booleano	FALSO	-
veinticuatro	filtroNodo	Función de búsqueda personalizada	Función	-	Si no se aprueba, el valor predeterminado aún se filtrará según el campo de etiqueta del parámetro defaultProps.
25	claves expandidas predeterminadas	Expandir nodos de forma predeterminada	Formación	-	La matriz de identificación de nodo que se expandirá se deduplicará automáticamente en los lados izquierdo y derecho.
26	perezosoDerecha	En la versión 2.2.9, el atributo diferido solo tiene efecto en el lado izquierdo del árbol. Si necesita el lado derecho, use la carga diferida -> lazyRight.	Booleano	-	-
27	sjr	Modo libreta de direcciones, configure los datos del destinatario a la derecha	Formación	-	-
28	rsc	Modo libreta de direcciones, configure los datos de la persona con copia carbón a la derecha	Formación	-	-
29	señor	Modo libreta de direcciones, configure los datos de la persona de copia oculta a la derecha	Formación	-	-
30	raízPidValue	Modo Shuttle Box, el valor del pid de datos del nodo raíz, utilizado para hacer coincidir el bucle de salida, importante	Cadena, Número	0	-
31	comprobarEstrictamente	Si padre e hijo no están relacionados	Booleano	FALSO	Este modo no admite lazy. Los datos devueltos desde Data y toData son los datos más recientes y las claves y nodos en obj están incompletos. Y existen diferencias en la lógica de procesamiento para los lados izquierdo y derecho del nodo principal después de eliminar el nodo secundario: dado que aparecerá a la derecha al autorizar, se debe solicitar el nodo principal izquierdo, y al eliminar la autorización, se debe eliminar el nodo secundario. permisos no significa que desee eliminar los permisos principales.
32	renderAfterExpand	Si se deben representar nodos secundarios después de expandir un nodo de árbol por primera vez	Booleano	verdadero	-
33	expandirOnClickNode	Si expandir o reducir los nodos al hacer clic en ellos	Booleano	verdadero	-
34	checkOnClickNode	Si seleccionar el nodo al hacer clic en él	Booleano	FALSO	-
35	sangrar	Sangría horizontal entre nodos de nivel adyacentes, en píxeles	Número	16	-
36	clase de icono	Personalizar iconos para nodos de árbol	Cadena	-	-
37	arrastrable	Si se debe habilitar la función de nodo de arrastrar y soltar	Booleano	FALSO	-
38	permitir-arrastrar	Determinar si el nodo se puede arrastrar	Función (nodo)	-	-
39	permitir-caída	Determinar si el nodo de destino se puede colocar al arrastrar	Función (arrastrarNodo, soltarNodo, tipo)	-	El parámetro de tipo tiene tres situaciones: 'anterior', 'interior' y 'siguiente', que significan respectivamente colocar antes del nodo de destino, insertar en el nodo de destino y colocar después del nodo de destino.
40	checkStrictlyType	Hay tres modos que no están relacionados con padre e hijo: modo de autorización, modo títere y modo de bloque de construcción modular.	Cadena	autorización: seleccionar un nodo secundario a la izquierda traerá automáticamente el nodo principal; seleccionar un nodo principal a la derecha traerá automáticamente el nodo secundario; puede existir el mismo nodo no hoja en ambos lados de este modo títere: padre puro; La lanzadera secundaria no está asociada, pero se debe mantener la forma de la estructura del árbol completo; automáticamente trae solo las piezas necesarias para la lanzadera al lado opuesto para el empalme. Estructura esquelética; los mismos nodos que no son hojas pueden existir en ambos lados de este modo; el padre-hijo modular puro no asocia la lanzadera y no mantiene una estructura de árbol completa como los bloques de construcción, para formar una forma de árbol en el lado derecho. , el lado izquierdo debe ser desmantelado y el lado izquierdo debe ser desmantelado. Cuanto más en el lado derecho, más completa será la estructura del árbol de los lados izquierdo y derecho para garantizar una unicidad estricta;

evento

número de serie	nombre del evento	ilustrar	parámetros de devolución de llamada
1	agregar-btn	Evento desencadenado cuando se hace clic en el botón Agregar (addBtn antes de 2.4.0)	función (fromData, toData, obj), los modos de transferencia del cuadro de lanzadera del árbol son 1. Datos izquierdos después del movimiento, 2. Datos derechos después del movimiento, 3. Claves de nodo movidas, nodos, halfKeys, halfNodes, objetos de la libreta de direcciones en modo AddressList; Los parámetros de devolución son la lista de destinatarios correcta, la lista de copias al carbón correcta y la lista de copias al carbón correctas.
2	eliminar-btn	Evento desencadenado cuando se hace clic en el botón Eliminar (removeBtn antes de 2.4.0)	función (fromData, toData, obj), los modos de transferencia del cuadro de lanzadera del árbol son 1. Datos izquierdos después del movimiento, 2. Datos derechos después del movimiento, 3. Claves de nodo movidas, nodos, halfKeys, halfNodes, objetos de la libreta de direcciones en modo AddressList; Los parámetros de devolución son la lista de destinatarios correcta, la lista de copias al carbón correcta y la lista de copias al carbón correctas.
3	cambio de cheque izquierdo	Evento de verificación de datos de fuente izquierda	function(nodeObj, treeObj, checkAll) ve el valor de retorno del evento de verificación del componente el-tree, el nuevo parámetro checkAll indica si todos están seleccionados
4	cambio-verificación-derecha	Evento de verificación de datos del objetivo correcto	function(nodeObj, treeObj, checkAll) ve el valor de retorno del evento de verificación del componente el-tree, el nuevo parámetro checkAll indica si todos están seleccionados
5	nodo-arrastrar-inicio	Evento desencadenado cuando un nodo comienza a arrastrarse	Hay 3 parámetros en total, en orden: "izquierda"/"derecha", Nodo correspondiente al nodo arrastrado y evento
6	nodo-arrastrar-entrar	Eventos desencadenados al arrastrar a otros nodos	Hay 4 parámetros en total, en orden: "izquierda"/"derecha", el nodo correspondiente al nodo arrastrado, el nodo correspondiente al nodo ingresado y el evento.
7	nodo-arrastrar-dejar	Evento desencadenado al alejarse de un nodo	Hay 4 parámetros en total, en orden: "izquierda"/"derecha", el nodo correspondiente al nodo arrastrado, el nodo correspondiente al nodo izquierdo y el evento.
8	arrastre de nodo	Un evento que se activa cuando se arrastra un nodo (similar al evento del mouseover del navegador)	Hay 4 parámetros en total, en orden: "izquierda"/"derecha", el nodo correspondiente al nodo arrastrado, el nodo correspondiente al nodo ingresado actualmente y el evento.
9	extremo de arrastre de nodo	Evento que se activa cuando finaliza el arrastre (puede que no tenga éxito)	Hay 5 parámetros en total, en orden: "izquierda"/"derecha", el nodo correspondiente al nodo arrastrado, el último nodo ingresado cuando finaliza el arrastre (puede estar vacío), la posición de ubicación del nodo arrastrado (antes , después, interior), evento
10	caída de nodo	Evento desencadenado cuando el arrastre se completa con éxito	Hay 5 parámetros en total, en orden: "izquierda"/"derecha", el nodo correspondiente al nodo arrastrado, el último nodo ingresado cuando finaliza el arrastre, la posición de ubicación del nodo arrastrado (antes, después, interior) , evento

método

número de serie	nombre	ilustrar
1	claroComprobado	Borre el nodo seleccionado, borre todo de `type：string left左边right右边all全部默认all`
2	obtenerComprobado	Obtener datos seleccionados
3	setComprobado	Establecer la función de datos seleccionada (leftKeys = [], rightKeys = [])
4	borrarfiltro	Borrar las condiciones del cuadro de búsqueda, borrar todas las funciones de forma predeterminada (tipo: Cadena) izquierda, izquierda, derecha, todas, todas por defecto

ranura

número de serie	nombre	ilustrar
1	pie izquierdo	Las ranuras inferiores izquierda y derecha de la caja de transporte
2	pie derecho	Las ranuras inferiores izquierda y derecha de la caja de transporte
3	título izquierdo	Contenido personalizado en los lados izquierdo y derecho del área de título del cuadro de transporte
4	derecho de título	Contenido personalizado en los lados izquierdo y derecho del área de título del cuadro de transporte
5	forma	La ranura superior del área de contenido izquierda
6	a	La ranura superior del área de contenido a la derecha.
7	contenido izquierdo	Personalizar el nodo del árbol izquierdo
8	derecho de contenido	Personaliza el nodo del árbol correcto

Notas de la versión

2.4.6 Corrija el error de reconstrucción (no use 2.4.0-2.4.5); agregue tres modos que no estén relacionados con padre e hijo (incluido el modo de autorización) para reconstruir la estructura del directorio de componentes y el rendimiento; de la prueba aproximada de los datos de demostración se ha mejorado enormemente; Optimice la selección de todos cuando el padre y el niño no estén relacionados; El evento addBtn es add-btn y removeBtn es remove-btn; agrega, arrastra y suelta; agrega una ranura de nodo personalizada; corrige que los datos desaparezcan después de seleccionar el cursor izquierdo y derecho dos veces al mismo tiempo; función de lanzadera no asociada entre padres e hijos

2.3.3 Cambie el algoritmo para juzgar si el objetivo del transbordador ya existe en el lado opuesto para evitar resultados coincidentes inesperados de la expresión regular str original (por ejemplo, tanto el campo secundario como el de lista tienen esta identificación. Después de eliminar el transbordador, el los datos en los elementos secundarios desaparecieron y los datos de la lista desaparecieron. Los datos todavía están allí; en este momento, la lógica de coincidencia original seguirá ignorando el transbordador cuando el objetivo de la tarea ya exista en el lado opuesto y agregue rootPidValue ); ya no fuerce el cambio del pid del nodo raíz a 0

2.3.2 Optimizar el modo libreta de direcciones

2.3.1 Mueva la configuración CSS de la capa externa para el-tree a la capa interna para eliminar el impacto de cancelar CSS en el ámbito 2.3.0

2.3.0 Cancelar alcance css

En la versión 2.2.9, el atributo diferido solo tiene efecto en el lado izquierdo del árbol. Si necesita el lado derecho, use la carga diferida -> lazyRight.

2.2.8 Optimice el uso de defaultCheckedKeys y defaultTransfer juntos, lo que desencadena el problema de agregar eventos. Por lo general, el primer transbordador predeterminado es que el fondo es vago y no genera dos datos fromData y toData. En este momento, es necesario activar el evento de adición nuevamente; alternativamente, en lugar de usar defaultTransfer, puede llamar manualmente a la función addToAims(false) después de que defaultCheckedKeys cambie. Si el parámetro se pasa a false, la devolución de llamada de emisión no será. motivado.

2.2.6 Agregar método clearChecked para borrar los nodos seleccionados

2.2.5 Agregar parámetro defaultExpandedKeys para expandir los nodos de forma predeterminada

2.2.3 Dividir el参数13 renderContent es renderContentLeft,renderContentRight definen respectivamente funciones de nodo personalizadas en los lados izquierdo y derecho y agregan filterNode para personalizar la búsqueda;

2.2.2 Agregar parámetros de resaltado seleccionados

2.2.1 Agregue el evento Seleccionar todo en el título. Para obtener una descripción detallada de los parámetros, consulte事件3，事件4

2.2.0 Función de carga diferida agregada (modo sin libreta de direcciones) Para obtener una descripción detallada de los parámetros, consulte参数21, 参数22

2.1.2 Se agregaron elementos configurables para el modo de libreta de direcciones, pero como modo de mantenimiento no principal, la flexibilidad aún es baja. Para obtener una descripción detallada de los parámetros, consulte参数20

2.1.1 Se corrigió el error de lanzadera al seleccionar el nodo raíz en modo matriz, se descartó el parámetro leafOnly y se tenga cuidado de no usar el parámetro arrayToTree si ya es una estructura de árbol.

2.1.0 Se agregó el parámetro arrayTotree para convertir automáticamente una matriz unidimensional en la estructura de árbol requerida (consulte el parámetro 19 o github-app.vue para obtener más detalles; se solucionó el problema de los nodos medio seleccionados restantes después de que el transbordador eliminó algunos innecesarios); variables

2.0.2 Agregar área de contenido personalizado del espacio del encabezado del título

2.0.1 Se solucionó el problema de desconexión entre padres e hijos.

La versión 2.0.0 agrega eventos de verificación de datos en los lados izquierdo y derecho de la caja del transbordador, y ranuras inferiores en los lados izquierdo y derecho de la caja del transbordador.

La versión 1.9.8 corrige el informe de errores del botón personalizado button_text .

La versión 1.9.7 agrega el atributo defaultTransfer para satisfacer las necesidades de los usuarios que no desean dividir datos en fromData y toData, y agrega el atributo placeholder .

1.9.0 Mejorar la fuerza de coincidencia regular cuando la identificación contiene números y caracteres.

¡La versión 1.8.9 corrige el error de duplicación causado por la lanzadera cuando un nodo es a la vez un nodo de rama en un lado y un nodo de hoja en el otro lado! Resuelva el error de filtro no válido al personalizar los nombres de los nodos.

La versión 1.8.8 agrega transferOpenNode para administrar si se expanden los nodos después del transbordador, y defaultCheckedKeys se usa para configurar la expansión predeterminada inicial de los nodos.

La versión 1.8.7 agrega el modo de libreta de direcciones, addressList se puede configurar a través del campo modo. El valor opcional del campo modo es transfer |

La versión 1.7.7 ajusta los parámetros de los eventos addBtn y removeBtn y devuelve tres parámetros: el primer parámetro son los datos movidos desde los datos, el segundo parámetro son los datos movidos a los datos y el tercer parámetro es el objeto {keys, nodes, harfKeys, harfNodes}. . Se agregó el parámetro renderContent para admitir la personalización del nodo del árbol.

La versión 1.6.7 agrega los parámetros filter,openAll para establecer si se habilita el filtrado y se expande todo de forma predeterminada.

La versión 1.5.9 agrega el parámetro leafOnly para establecer si se deben devolver solo los nodos de hoja finales del árbol.

La versión 1.5.8 restaura el código para devolver nodes que se eliminó inexplicablemente en la versión anterior. Si su proyecto solo necesita valores de clave de nodo lanzadera, ¡no es necesario actualizarlo! disculpándose. . .

¡La versión 1.5.7 soluciona el problema de que los datos asincrónicos de los subcomponentes a veces no se actualizan! Se corrigió un error al personalizar el nombre del parámetro node_key, hijos, reemplazando automáticamente el pid de la primera capa de datos por 0

La versión 1.4.9 agrega parámetros de devolución de llamada para agregar y eliminar botones. El primer parámetro de función (teclas, nodos) es el valor de clave de nodo del nodo seleccionado, y el segundo parámetro es el nodo del nodo seleccionado.

La versión 1.4.8 soluciona el problema de que la identificación no puede pasar la función de verificación repetida cuando es de tipo número, pero aún así se recomienda usar el tipo de cadena para la identificación.

La versión 1.4.7 agrega defaultProps , el parámetro node_key y el parámetro pid . La función principal es personalizar algunos nombres de campos importantes para mejorar la flexibilidad de los datos y evitar ser sacrificados en segundo plano debido a diferentes nombres de campos.

La versión 1.3.7 cancela la dependencia de la biblioteca loadsh. Anteriormente, esta biblioteca solo se usaba para algún procesamiento de copia profunda.

Versión antigua del documento [ya no se actualiza]

Parámetros: width Descripción: Tipo宽度: String Requerido: false Valor predeterminado: 100% Suplemento:建议在外部盒子设定宽度和位置
Parámetros: height Descripción: Tipo高度: String Requerido: false Valor predeterminado: 320px
Parámetros: title Descripción: Tipo标题: Array Requerido: false Valor predeterminado: ["源列表", "目标列表"]
Parámetros: button_text Descripción: Tipo按钮名字: Array Requerido: false Valor predeterminado:空
Parámetros: from_data Descripción: Tipo源数据: Array Requerido: true Suplemento:数据格式同element-ui tree组件，但必须有id和pid
Parámetros: to_data Descripción: Tipo目标数据: Array Requerido: true Suplemento:数据格式同element-ui tree组件，但必须有id和pid
Parámetros: defaultProps Descripción:配置项-同el-tree中props Requerido: false Suplemento:用法和el-tree的props一样
Parámetros: descripción node_key :自定义node-key的值，默认为id : false Suplemento:必须与treedata数据内的id参数名一致，必须唯一
Parámetros: pid Descripción:自定义pid的参数名，默认为"pid" Requerido: false Suplemento:有网友提出后台给的字段名不叫pid，因此增加自定义支持
--(obsoleto) ¡No recomendado! Parámetros: leafOnly Descripción:是否只返回叶子节点Tipo: Boolean Requerido: false Suplemento:默认false，如果你只需要返回的末端子节点可使用此参数
Parámetros: descripción filter :是否开启筛选功能Tipo: Boolean Requerido: false
Parámetros: openAll Descripción:是否默认展开全部: Boolean Requerido: false
Parámetros: renderContent Descripción: Tipo de自定义树节点: Function requerida: false Suplemento:用法同element-ui tree
Parámetros: descripción mode :设置模式，字段可选值为transfer|addressList Tipo: String Requerido: false Suplemento: mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
Parámetros: transferOpenNode Descripción:穿梭后是否展开穿梭的节点: Boolean Requerido: false Suplemento:默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据
Parámetros: defaultCheckedKeys Descripción: Tipo默认展开节点: Array Requerido: false Suplemento:只匹配初始时默认节点，不会在你操作后动态改变默认节点
Parámetros: placeholder Descripción:设置搜索框提示语: String Requerido: false Suplemento:默认为请输入关键词进行筛选
Parámetros: descripción defaultTransfer :是否自动穿梭一次默认选中defaultCheckedKeys的节点: Boolean . Requerido: false默认false，用来满足用户不想将数据拆分成fromData和toData的需求
Parámetros: arrayToTree Descripción:是否开启一维数组转化为树形结构Tipo: Boolean Requerido: false Suplemento:数据必须存在根节点，并且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在一定的性能问题
Parámetros: addressOptions Descripción:通讯录模式配置项{num: Number, suffix: String, connector: String} Tipo: Object Requerido: false Suplemento: num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默认suffix connector -> 连接符（字符串）默认-
Parámetros: lazy Descripción:是否启用懒加载Tipo: Boolean Requerido: false Suplemento:默认false，效果动el-tree懒加载，不可和openAll或默认展开同时使用
Parámetros: lazyFn Descripción: Tipo懒加载的回调函数: Function requerida: true Suplemento:当适用lazy时必须传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node，resolve->懒加载resolve，from -> left|right 表示回调来自左侧|右侧
Evento: addBtn Descripción:点击添加按钮时触发的事件: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
Evento: removeBtn Descripción:点击移除按钮时触发的事件: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
Evento: left-check-change Descripción: Parámetros de devolución de llamada左侧源数据勾选事件: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
Evento: right-check-change Descripción: Parámetros de devolución de llamada右侧目标数据勾选事件: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值，新增第三个参数表示是否全部选中
Ranura: left-footer , right-footer Descripción:穿梭框左侧、右侧底部slot
Ranura: title-left , title-right Descripción:穿梭框标题区左侧、右侧自定义内容