wl vue select Download - wl vue select Download do código-fonte

wl vue select

Outras categorias

1.0.0

Baixar

seleção wl-vue, seleção wl-tree

Introdução

Caixa suspensa de árvore e caixa suspensa comum com todas as seleções para estrutura vue.
Caixa suspensa de árvore para estrutura vue e caixa suspensa comum com seleção de tudo.
Este componente fornece funções de caixa suspensa de seleção de tudo e caixa suspensa de árvore.
wlVueSelect é uma caixa suspensa secundária encapsulada baseada no componente el-select do elementUi, que fornece funções de seleção total e funções de seleção padrão;
wlTreeSelect é uma caixa suspensa secundária encapsulada baseada no componente el-tree do elementUi, que fornece suporte a dados de árvore e funções de seleção padrão;
Como essas duas necessidades são muito comuns, elas são lançadas como um plug-in separado.
el-selecionar

Acesso on-line

Principais registros de lançamento

0.4.8 Corrigido o problema de que o nó pai não pode ser cancelado quando todos os nós filhos são selecionados na caixa suspensa da árvore.

Comece rapidamente

npm i wl-vue-select --save

ou

npm i wl-vue-select -S

usar

 import wl from "wl-vue-select";`
import "wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);

    <wlVueSelect
      v-model="value"
      :props="props"
      :data="data"
      multiple
      default-select
    ></wlVueSelect>
    <p>----------分割线------------</p>
    <wlTreeSelect
      leaf
      width="240"
      checkbox
      :data="treeData"
      @change="hindleChanged"
      v-model="selected"
    ></wlTreeSelect>

 data() {
    return {
      value: [], // 选中值
      data: [
        {
          id: 1,
          name: "海边"
        },
        {
          id: 2,
          name: "森林"
        },
        {
          id: 3,
          name: "草原"
        },
        {
          id: 4,
          name: "古城"
        }
      ], // 数据
      props: {
        label: "name",
        value: "id"
      }, // 配置
      treeData: [
        {
          id: "love",
          name: "所有和你走过的风光",
          children: [
            {
              id: 1,
              name: "海边",
              children: [
                {
                  id: 5,
                  name: "蓬莱",
                }
              ]
            },
            {
              id: 2,
              name: "森林"
            },
            {
              id: 3,
              name: "草原"
            },
            {
              id: 4,
              name: "古城"
            }
          ]
        }
      ],
      selected: [ "1" ]// 树下拉框选中数据
    };
  },
  methods: {
    hindleChanged(val){
      console.log(val,2)
      console.log(this.selected)
    }
  },

documento

número de série	parâmetro	ilustrar	tipo	Valor opcional	valor padrão
1	dados	opções opcionais lista dados	Variedade	-	-
2	adereços	Itens de configuração: o campo de rótulo que exibe o nome e o campo de valor que vincula o valor	Objeto	-	{rótulo: "rótulo", valor: "valor" }
3	mostrarTotal	Exibir a opção`全选`quando houver mais do que algumas opções disponíveis	Número	-	1
4	seleção padrão[obsoleto]	Seja para habilitar a seleção padrão, se`全部`estiver habilitado, todos serão selecionados, se não todos, o primeiro será selecionado. (Por favor, não atribua um valor inicial ao modelo v ao ativar esta função)	Booleano	-	falso
5	outro	Outros parâmetros fornecidos por el-select	-	-	-
6	nodeKey	Ao usar a caixa suspensa da árvore, você deve usar a chave para analisar os dados	Corda	-	EU IA
7	selecionado[obsoleto]	Ao usar a caixa suspensa da árvore, vincule os dados selecionados [agora alterado para modelo v]	String-Número-Array-Objeto	-	-
8	caixa de seleção	Ao usar a caixa suspensa da árvore, se deseja ativar a seleção múltipla	Booleano	-	falso
9	largura	Largura ao usar a caixa suspensa de árvore, a unidade padrão é px	String-Número	-	240
10	folha	Em uma caixa suspensa de árvore, se apenas nós folha podem ser selecionados	Booleano	-	falso
11	acionar	Quando a caixa suspensa de árvore é usada, o método de acionamento	Corda	clicar/focar/passar o mouse/manual	clique
12	modelo v	Os valores de vinculação de caixa suspensa normal e de árvore são usados da mesma forma que os elementos de formulário comuns.	String-Número-Array-Objeto	-	-
13	desabilitado	Se deseja desativar a caixa suspensa	Booleano	-	falso
14	agorarap	Se deve-se proibir a exibição de múltiplas linhas. Se for verdade, apenas uma linha será exibida.	Booleano	-	falso
15	noCheckedClose	Quando múltiplas seleções são feitas, se a área de opções deve ser fechada automaticamente quando todas estiverem desmarcadas	Booleano	-	falso
16	tamanho	Tamanho, uso é o mesmo que elementui	Corda	-	médio
17	padrãoExpandAll	Em forma de árvore, se deseja expandir todas as opções por padrão	Booleano	-	verdadeiro
18	padrãoExpandedKeys	No formato de árvore, as chaves dos nós são expandidas por padrão.	Variedade	-	-
19	filtrável	Se deve ativar a função de pesquisa (ao adicionar uma caixa suspensa de árvore, ela tem a mesma função que uma caixa suspensa comum)	Booleano	-	falso
20	filtroFnc	No formato de árvore, você pode personalizar opcionalmente a lógica de pesquisa. Caso não seja aprovado, a pesquisa será baseada no campo correspondente ao rótulo nos adereços. função (valor, dados)	Função	-	-
vinte e um	verificar estritamente	Em forma de árvore, se pai e filho não estão relacionados	Booleano	-	falso
vinte e dois	expandOnClickNode	Em forma de árvore, clicar em um nó pode expandi-lo ou reduzi-lo	Booleano	-	falso
vinte e três	checkOnClickNode	Se deve selecionar o nó ao clicar no nó, o valor padrão é falso, ou seja, o nó só será selecionado quando a caixa de seleção for clicada	Booleano	-	falso

Métodos

número de série	nome	ilustrar	parâmetro
1	fecharOpções	Feche a área de opções da caixa suspensa da árvore	-

registro de versão

0.5.8 Adicionada configuração independente pai-filho na caixa suspensa da árvore

0.5.5 Corrigido o erro de lógica de seleção automática quando o valor de ligação inicial da caixa suspensa da árvore é um array simples corrigido o estilo de centralização vertical;

0.5.4 Corrigido o problema de que quando todos os dados são selecionados inicialmente, cada item é listado na área de exibição em vez de exibir 'todos', a função de introdução do script é adicionada;

0.5.3 Ajuste o nome do componente para grande volume; adicione introdução sob demanda;

0.5.2 Otimize a caixa suspensa da árvore e adicione funções de pesquisa e pesquisa personalizada

0.5.1 Otimize a caixa suspensa da árvore e as opções exibem efeitos excessivos

0.5.0 Adicionada caixa suspensa de árvore defaultExpandAll, campos defaultExpandedKeys

0.4.9 Adicione o método closeOptions para fechar a área de opções da caixa suspensa da árvore

0.4.8 Corrigido o problema de que o nó pai não pode ser cancelado quando todos os nós filhos são selecionados na caixa suspensa da árvore.

0.4.7 Otimize a caixa suspensa da árvore e suporte as tags de colapso do el-select

0.4.6 Otimize a caixa suspensa da árvore e torne o atributo de tamanho efetivo

0.4.5 Otimize o espaço reservado da caixa suspensa da árvore e adicione gerenciamento de parâmetros para fechar a opção quando todos estiverem desmarcados.

0.4.2 Otimize a caixa suspensa da árvore e adicione se deseja proibir múltiplas linhas de campos.

0.4.1 Otimize a caixa suspensa da árvore e adicione campos desabilitados

0.3.9 Otimize a caixa suspensa da árvore para extrair o id por padrão quando os dados selecionados passados forem um array complexo;

0.3.8 Corrigido o problema de que quando a caixa suspensa da árvore é multisselecionada, apenas a área de exibição é desmarcada, mas a caixa de seleção da árvore não é desmarcada quando os dados estão vazios.

0.3.7 Modifique se deseja selecionar apenas nós filhos de acordo com o campo folha ao selecionar a caixa suspensa da árvore.

0.3.5 Corrigido o defeito de seleção padrão na seleção de rádio da caixa suspensa da árvore [quando o valor vinculado é um array]

0.3.4 Corrigido o problema de que o campo selecionado padrão da caixa suspensa da árvore el-tree está vazio e o método getNodes também pode obter o último valor do exemplo rademe atualizado.

0.3.3 Corrigido o problema de loop infinito quando a seleção múltipla está habilitada na caixa suspensa da árvore e otimizou o campo leaf para determinar se deve retornar apenas nós folha quando a seleção múltipla estiver habilitada.

0.3.2 Otimize o problema de a caixa suspensa da árvore não ser exibida quando se estende horizontalmente

0.3.0 Otimize a caixa suspensa da árvore e adicione um campo de modo de exibição do acionador

0.2.7 Ao otimizar a seleção única da caixa suspensa da árvore, o nível opcional é adicionado e leaf é adicionado para definir se apenas os nós folha podem ser selecionados. Quando a seleção única da árvore é otimizada, o destaque. efeito quando o tipo de objeto é selecionado por padrão

0.2.5 Otimize o algoritmo de filtragem da caixa suspensa em árvore, otimize a caixa suspensa em árvore para aumentar o efeito de rolagem quando as opções disponíveis forem muito longas