Download tree transfer - tree transfer Download do código-fonte

tree transfer

Outras categorias

1.0.0

Baixar

el-tree-transferência

Introdução

el-tree-fransfer é um componente de caixa de transporte de árvore baseado em VUE e element-ui. Certifique-se de ter introduzido element-ui antes de usá-lo! A função deste componente é semelhante ao componente de transferência de element-ui , mas os dados dentro dele são uma estrutura em árvore! Na verdade, os componentes element-ui dos quais el-tree-transfer depende são Checkbox, Button e o controle principal da árvore Tree! Não é uma extensão do componente shuttle box do element-ui, mas apenas se refere à sua aparência, estilo e funcionalidade.

Como os negócios da empresa usam a estrutura Vue, a biblioteca UI usa element-ui. É difícil encontrar um componente útil da caixa de transporte da árvore Vue no mercado, e não queremos introduzir outros plug-ins pesados fora do element-ui apenas por causa de uma caixa de transporte, então há transferência de el-tree. Leve, fácil de usar, sem necessidade de custos adicionais de aprendizagem.

Endereço do documento - Acesso online - GitHub - Nuggets

Atualizações importantes

2.4.6 Corrija o erro de reconstrução (não use 2.4.0-2.4.5); adicione três modos que não estão relacionados ao pai e ao filho (incluindo o modo de autorização); do teste aproximado dos dados de demonstração é bastante melhorado; Otimiza a seleção de todos quando o pai e o filho não estão relacionados; O evento addBtn é add-btn e removeBtn é remove-btn; adicionar arrastar e soltar adicionar slot de nó personalizado; função de transporte não associado pai-filho

2.3.3 Modifique a lógica de correspondência do shuttle; adicione o parâmetro rootPidValue. Consulte as notas de versão abaixo para obter instruções detalhadas

Comece rapidamente

Primeiro npm baixe o plug-in

npm install el-tree-transfer --save

ou

npm i el-tree-transfer -S

Então você pode usar el-tree-transfer como um 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 série	parâmetro	ilustrar	tipo	valor padrão	Reabastecer
1	largura	largura	Corda	100%	Recomenda-se definir a largura e a posição da caixa externa
2	altura	alto	Corda	320px	-
3	título	título	Corda	["lista de origem", "lista de destino"]	-
4	texto_de_botão	nome do botão	Variedade	-	-
5	de_dados	dados de origem	Variedade	-	O formato dos dados é o mesmo do componente da árvore element-ui, mas deve ter id e pid
6	para_dados	dados de destino	Variedade	-	O formato dos dados é o mesmo do componente da árvore element-ui, mas deve ter id e pid
7	defaultProps	Itens de configuração - iguais aos adereços no el-tree	Objeto	{ label: "rótulo", filhos: "filhos", isLeaf: "folha", desabilitar: "desabilitar" }	O uso é o mesmo dos adereços el-tree
8	node_key	Personalize o valor da chave do nó, o padrão é id	Corda	EU IA	Deve ser consistente com o nome do parâmetro id nos dados treedata e deve ser exclusivo.
9	pid	Personalize o nome do parâmetro pid, o padrão é "pid"	Corda	pid	Alguns internautas sugeriram que o nome do campo fornecido pelo plano de fundo não é chamado de pid, portanto, é adicionado suporte personalizado.
10	folhaApenas	abandonado	-	-	-
11	filtro	Se deve ativar a função de filtragem	Booleano	falso	Filtrar com base no campo rótulo do parâmetro defaultProps
12	abrir tudo	Se deve expandir tudo por padrão	Booleano	falso	Há um problema de desempenho
13	~~renderContent~~ renderContentLeft, renderContentRight	Nó de árvore personalizado, o uso é igual à árvore element-ui	Função	-	A versão 2.2.3 é dividida em duas funções para definir nós personalizados nos lados esquerdo e direito, respectivamente.
14	modo	Definir modo de caixa de transporte	Corda	transferir	O modo padrão é o modo de transferência, que é o modo de transferência em árvore. O campo configurável é addressList e pode ser alterado para o modo de catálogo de endereços, o nome do botão não pode ser personalizado. , basta passar quatro valores na matriz de títulos, no modo addressList, o título é padronizado como catálogo de endereços, destinatário, pessoa com cópia carbono e pessoa com cópia carbono oculta.
15	transferirOpenNode	Se deve expandir os nós de transporte após o transporte	Booleano	verdadeiro	O padrão é verdadeiro, o que significa que o nó shuttle será expandido para inspeção visual. Este parâmetro é adicionado porque haverá problemas óbvios de atraso na expansão quando a quantidade de dados for grande. No entanto, observe que se este parâmetro for definido como falso. , não será expandido após o transporte. Afinal, é impossível determinar em qual camada haverá dados enormes.
16	defaultCheckedKeys	Nó selecionado por padrão	Variedade	falso	Corresponde apenas ao nó padrão inicial e não alterará dinamicamente o nó padrão após operá-lo.
17	espaço reservado	Definir prompts da caixa de pesquisa	Corda	Insira palavras-chave para filtrar	-
18	transferência padrão	Se deve ser transferido automaticamente uma vez para o nó com defaultCheckedKeys selecionado por padrão	Booleano	falso	Usado para atender às necessidades de usuários que não desejam dividir os dados em fromData e toData.
19	arrayToTree	Se deve permitir a conversão de matrizes unidimensionais em estruturas de árvore	Booleano	falso	Os dados devem ter um nó raiz e não estar quebrados. Para obter detalhes sobre o formato dos dados, consulte app.vue no github. De acordo com o relacionamento correspondente entre id e pid, há certos problemas de desempenho durante a conversão.
20	opções de endereço	Itens de configuração do modo catálogo de endereços	Objeto	{num: Número, sufixo: String, conector: String}	num-> O número de catálogos de endereços necessários no lado direito, o padrão é 3 suffix-> O campo que você deseja unir após o rótulo (como id, ou seja, pegue o id desses dados e emende-o na parte de trás ). O padrão é o sufixo conector -> conector (string) padrão-
vinte e um	preguiçoso	Se deve ativar o carregamento lento	Booleano	falso	O efeito é o carregamento lento da árvore el-tree e não pode ser usado ao mesmo tempo que openAll ou expansão padrão.
vinte e dois	preguiçosoFn	Função de retorno de chamada de carregamento lento	Função	-	Quando preguiçoso é usado, a função de retorno de chamada deve ser passada, exemplo: preguiçosoFn='loadNode', parâmetro de retorno loadNode(node, resolve, from), node->nó atualmente expandido node, resolve->lazy loading resolve, from -> left/right Indica que o retorno de chamada vem do lado esquerdo/direito
vinte e três	destaque	Se deve destacar o nó atualmente selecionado	Booleano	falso	-
vinte e quatro	filtroNode	Função de pesquisa personalizada	Função	-	Se não for aprovado, o padrão ainda será filtrado com base no campo rótulo do parâmetro defaultProps.
25	padrãoExpandedKeys	Expandir nós por padrão	Variedade	-	A matriz de ID do nó a ser expandida será automaticamente desduplicada nos lados esquerdo e direito.
26	preguiçosoCerto	Na versão 2.2.9, o atributo lento só tem efeito no lado esquerdo da árvore. Se você precisar do lado direito, use carregamento lento -> preguiçosoRight.	Booleano	-	-
27	senhor	Modo catálogo de endereços, defina os dados do destinatário à direita	Variedade	-	-
28	RSE	Modo de catálogo de endereços, defina os dados da pessoa em cópia carbono à direita	Variedade	-	-
29	senhor	Modo de catálogo de endereços, defina os dados da pessoa em cópia oculta à direita	Variedade	-	-
30	rootPidValue	Modo Shuttle Box, o valor do pid de dados do nó raiz, usado para corresponder ao loop de saída, importante	Cadeia de caracteres,Número	0	-
31	verificar estritamente	Se pai e filho não são parentes	Booleano	falso	Este modo não oferece suporte a preguiçoso. Os fromData e toData retornados são os dados mais recentes e as chaves e nós em obj estão incompletos. E há diferenças na lógica de processamento para os lados esquerdo e direito do nó pai após a exclusão do nó filho: uma vez que aparecerá à direita ao autorizar, o nó pai esquerdo deve ser obrigatório, e ao excluir a autorização, remover o filho permissões não significa que você deseja remover as permissões pai.
32	renderAfterExpand	Se os nós filhos devem ser renderizados após um nó de árvore ser expandido pela primeira vez	Booleano	verdadeiro	-
33	expandOnClickNode	Se deve expandir ou reduzir nós ao clicar neles	Booleano	verdadeiro	-
34	checkOnClickNode	Se deve selecionar o nó ao clicar nele	Booleano	falso	-
35	recuar	Recuo horizontal entre nós de nível adjacentes, em pixels	Número	16	-
36	classe de ícone	Personalize ícones para nós de árvore	Corda	-	-
37	arrastável	Se deve ativar a função de nó arrastar e soltar	Booleano	falso	-
38	permitir arrastar	Determine se o nó pode ser arrastado	Função (nó)	-	-
39	permitir queda	Determine se o nó de destino pode ser colocado ao arrastar	Função (arrastandoNode, dropNode, tipo)	-	O parâmetro de tipo possui três situações: 'prev', 'inner' e 'next', o que significa respectivamente colocar antes do nó alvo, inserir no nó alvo e colocar depois do nó alvo.
40	checkStrictlyType	Existem três modos que não estão relacionados a pai e filho: modo de autorização, modo fantoche e modo de bloco de construção modular.	Corda	autorização: selecionar um nó filho à esquerda trará automaticamente o nó pai; selecionar um nó pai à direita trará automaticamente o mesmo nó não-folha pode existir em ambos os lados deste modo; O transporte infantil não está associado, mas a árvore completa deve ser mantida em forma de estrutura, ela traz automaticamente apenas as peças necessárias para o transporte para o lado oposto para emenda. Estrutura de esqueleto; os mesmos nós não-folha podem existir em ambos os lados deste modo, pai-filho modular puro não associa transporte e não mantém uma estrutura de árvore completa como blocos de construção, para formar uma forma de árvore no lado direito. , o lado esquerdo precisa ser desmontado, e o lado esquerdo precisa ser desmontado. Quanto mais no lado direito, mais completa é a estrutura da árvore, os lados esquerdo e direito deste padrão garantem uma exclusividade estrita;

evento

número de série	nome do evento	ilustrar	parâmetros de retorno de chamada
1	adicionar-btn	Evento acionado quando o botão adicionar é clicado (addBtn antes de 2.4.0)	função (fromData, toData, obj), os modos de transferência da caixa de transporte da árvore são 1. Dados à esquerda após o movimento, 2. Dados à direita após o movimento, 3. Chaves de nó movidas, nós, objetos halfKeys, halfNodes do catálogo de endereços addressList No modo, os objetos; os parâmetros de retorno são a lista de destinatários correta, a lista de cópias carbono corretas e a lista de cópias ocultas corretas.
2	remover-btn	Evento acionado quando o botão remover é clicado (removeBtn antes de 2.4.0)	função (fromData, toData, obj), os modos de transferência da caixa de transporte da árvore são 1. Dados à esquerda após o movimento, 2. Dados à direita após o movimento, 3. Chaves de nó movidas, nós, objetos halfKeys, halfNodes do catálogo de endereços addressList No modo, os objetos; os parâmetros de retorno são a lista de destinatários correta, a lista de cópias carbono corretas e a lista de cópias ocultas corretas.
3	esquerda-check-change	Evento de verificação de dados de origem à esquerda	function(nodeObj, treeObj, checkAll) veja o valor de retorno do evento de verificação do componente el-tree, o novo parâmetro checkAll indica se todos estão selecionados
4	direita-verificar-alterar	Evento de verificação de dados de destino correto	function(nodeObj, treeObj, checkAll) veja o valor de retorno do evento de verificação do componente el-tree, o novo parâmetro checkAll indica se todos estão selecionados
5	nó-arrastar-iniciar	Evento acionado quando um nó começa a arrastar	Existem 3 parâmetros no total, em ordem: "esquerda"/"direita", Nó correspondente ao nó arrastado e evento
6	nó-arrastar-enter	Eventos acionados ao arrastar para outros nós	Existem 4 parâmetros no total, em ordem: "esquerda"/"direita", o Nó correspondente ao nó arrastado, o Nó correspondente ao nó inserido e o evento
7	nó-arrastar-sair	Evento acionado ao arrastar para fora de um nó	Existem 4 parâmetros no total, em ordem: "left"/"right", o Node correspondente ao nó arrastado, o Node correspondente ao nó esquerdo e o evento
8	arrastar nó	Um evento acionado quando um nó é arrastado (semelhante ao evento de passagem do mouse do navegador)	Existem 4 parâmetros no total, em ordem: "esquerda"/"direita", o Nó correspondente ao nó arrastado, o Nó correspondente ao nó inserido atualmente e o evento
9	nó-arrastar-final	Evento acionado ao arrastar termina (pode não ser bem-sucedido)	Existem 5 parâmetros no total, em ordem: "esquerda"/"direita", o nó correspondente ao nó arrastado, o último nó inserido quando o arrasto é finalizado (pode estar vazio), a posição de posicionamento do nó arrastado (antes , depois, interno), evento
10	queda de nó	Evento acionado quando o arrasto é concluído com sucesso	Existem 5 parâmetros no total, em ordem: "esquerda"/"direita", o nó correspondente ao nó arrastado, o último nó inserido quando o arrasto é finalizado, a posição de posicionamento do nó arrastado (antes, depois, interno) , evento

método

número de série	nome	ilustrar
1	limpar verificado	Limpe o nó selecionado, limpe tudo por padrão `type：string left左边right右边all全部默认all`
2	getChecked	Obtenha dados selecionados
3	setChecked	Definir função de dados selecionada (leftKeys = [], rightKeys = [])
4	limparFiltro	Limpar condições da caixa de pesquisa, limpar todas as funções por padrão (tipo: String) esquerda, esquerda, direita, todas, padrão todas

slot

número de série	nome	ilustrar
1	rodapé esquerdo	Os slots inferiores esquerdo e direito da caixa de transporte
2	rodapé direito	Os slots inferiores esquerdo e direito da caixa de transporte
3	título à esquerda	Conteúdo personalizado nos lados esquerdo e direito da área de título da caixa de transporte
4	título à direita	Conteúdo personalizado nos lados esquerdo e direito da área de título da caixa de transporte
5	forma	O slot superior da área de conteúdo esquerda
6	para	O slot superior da área de conteúdo à direita
7	conteúdo esquerdo	Personalize o nó esquerdo da árvore
8	conteúdo certo	Personalize o nó da árvore correto

Notas de versão

2.4.6 Corrija o erro de reconstrução (não use 2.4.0-2.4.5); adicione três modos que não estão relacionados ao pai e ao filho (incluindo o modo de autorização); do teste aproximado dos dados de demonstração é bastante melhorado; Otimiza a seleção de todos quando o pai e o filho não estão relacionados; O evento addBtn é add-btn e removeBtn é remove-btn; adicionar arrastar e soltar adicionar slot de nó personalizado; função de transporte não associado pai-filho

2.3.3 Altere o algoritmo para julgar se o destino do ônibus espacial já existe no lado oposto para evitar resultados de correspondência inesperados da expressão regular str original (por exemplo, os campos filhos e lista têm este id. Depois que o transporte é removido, o os dados dos filhos desapareceram e os dados da lista desapareceram. Os dados ainda estão lá, neste momento a lógica de correspondência original ainda ignorará o transporte quando o destino rootPidValue tarefa já existir no lado oposto); não força mais o pid do nó raiz a ser alterado para 0

2.3.2 Otimizar modo de catálogo de endereços

2.3.1 Mova as configurações de CSS da camada externa para el-tree para a camada interna para eliminar o impacto do cancelamento do CSS com escopo definido em 2.3.0

2.3.0 Cancelar escopo CSS

Na versão 2.2.9, o atributo lento só tem efeito no lado esquerdo da árvore. Se você precisar do lado direito, use carregamento lento -> preguiçosoRight.

2.2.8 Otimize o uso de defaultCheckedKeys e defaultTransfer juntos, o que desencadeia o problema de adição de eventos. Normalmente, o primeiro transporte padrão é que o fundo é preguiçoso e não gera dois dados fromData e toData. . Neste momento, é necessário acionar o evento de adição novamente; Alternativamente, em vez de usar defaultTransfer, você pode chamar manualmente a função addToAims(false) após a alteração de defaultCheckedKeys. provocado.

2.2.6 Adicionar método clearChecked para limpar nós selecionados

2.2.5 Adicionar parâmetro defaultExpandedKeys para expandir nós por padrão

2.2.3 Dividir o参数13 renderContent é renderContentLeft,renderContentRight respectivamente definem funções de nó personalizado nos lados esquerdo e direito e adicionam filterNode para personalizar a pesquisa;

2.2.2 Adicionar parâmetros de destaque selecionados

2.2.1 Adicione o evento selecionar tudo no título. Para descrição detalhada dos parâmetros, consulte事件3，事件4

2.2.0 Adicionada função de carregamento lento (modo sem catálogo de endereços). Para descrição detalhada dos parâmetros, consulte参数21, 参数22

2.1.2 Adicionados itens configuráveis para o modo de catálogo de endereços, mas como modo de manutenção não principal, a flexibilidade ainda é baixa. Para descrição detalhada dos parâmetros, consulte参数20

2.1.1 Corrigido erro de shuttle ao selecionar o nó raiz em modo array, descartado o parâmetro leafOnly , e cuidado para não utilizar o parâmetro arrayToTree caso já seja uma estrutura em árvore.

2.1.0 Adicionado o parâmetro arrayTotree para converter automaticamente um array unidimensional na estrutura de árvore necessária (consulte o parâmetro 19 ou github-app.vue para obter detalhes); variáveis

2.0.2 Adicionar área de conteúdo personalizada do slot do cabeçalho do título

2.0.1 Corrigido o problema de desconexão pai-filho.

A versão 2.0.0 adiciona eventos de verificação de dados nos lados esquerdo e direito da caixa de transporte e slots inferiores nos lados esquerdo e direito da caixa de transporte.

A versão 1.9.8 corrige o relatório de erros do botão personalizado button_text .

A versão 1.9.7 adiciona o atributo defaultTransfer para atender às necessidades dos usuários que não desejam dividir os dados em fromData e toData e adiciona o atributo placeholder .

1.9.0 Melhore a força da correspondência regular quando o ID contém números e caracteres.

A versão 1.8.9 corrige o erro de duplicação causado pelo shuttle quando um nó é um nó ramificado de um lado e um nó folha do outro lado! Resolva erro de filtro inválido ao personalizar nomes de nós.

A versão 1.8.8 adiciona transferOpenNode para gerenciar a expansão dos nós após o transporte, e defaultCheckedKeys é usado para definir a expansão padrão inicial dos nós.

A versão 1.8.7 adiciona o modo de catálogo de endereços, addressList pode ser configurado através do campo mode O valor opcional do campo mode é transfer |

A versão 1.7.7 ajusta os parâmetros dos eventos addBtn e removeBtn , retornando três parâmetros. O primeiro parâmetro são os dados fromData movidos, o segundo parâmetro são os dados toData movidos e o terceiro parâmetro é o objeto {keys, nodes, harfKeys, harfNodes}. . Adicionado parâmetro renderContent para oferecer suporte à personalização do nó da árvore.

A versão 1.6.7 adiciona parâmetros filter,openAll para definir se a filtragem deve ser habilitada e se deve ser expandida por padrão.

A versão 1.5.9 adiciona o parâmetro leafOnly para definir se deseja retornar apenas os nós folhas finais da árvore.

A versão 1.5.8 restaura o código para retornar nodes que foram inexplicavelmente excluídos na versão anterior. Se o seu projeto precisar apenas de valores de chave de nó de transporte, não há necessidade de atualização! pedindo desculpas. . .

A versão 1.5.7 corrige o problema de que os dados assíncronos dos subcomponentes às vezes não são atualizados! Corrigido erro ao personalizar o nome do parâmetro node_key, filhos, substituindo automaticamente o pid da primeira camada de dados por 0

A versão 1.4.9 adiciona parâmetros de retorno de chamada para adicionar e remover botões. O primeiro parâmetro de function(keys,nodes) é o valor da chave do nó do nó selecionado, e o segundo parâmetro é o nó do nó selecionado.

A versão 1.4.8 corrige o problema de que o id não pode passar pela função de verificação repetida quando é do tipo número, mas ainda é recomendado usar o tipo string para o id.

A versão 1.4.7 adiciona defaultProps , o parâmetro node_key e o parâmetro pid . A função principal é personalizar alguns nomes de campos importantes para melhorar a flexibilidade dos dados e evitar serem sacrificados em segundo plano devido a nomes de campos diferentes.

A versão 1.3.7 cancela a dependência da biblioteca loadh Anteriormente, esta biblioteca era usada apenas para algum processamento de cópia profunda.

Versão antiga do documento [não mais atualizada]

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