el select v2
1.4.6
Componente seletor de lista virtual baseado no Element UI para versão Vue 2.
Demonstração on-line
npm i el-select-v2 npm i element-ui
import Vue from 'vue' ;
// 必须引入 element-ui
import ElementUI from 'element-ui' ;
import 'element-ui/lib/theme-chalk/index.css' ;
import ElSelectV2 from 'el-select-v2' ;
Vue . use ( ElSelectV2 ) ; < template >
< el-select-v2 v-model = " value " :options = " options " />
</ template >
< script >
export default {
data () {
return {
options : [],
value : ' ' ,
};
},
created () {
for ( let i = 0 ; i < 10000 ; i ++ ) {
this . options . push ({
value : ` value ${ i + 1 } ` ,
label : ` label ${ i + 1 } ` ,
});
}
},
};
</ script >Código de amostra
| parâmetro | ilustrar | tipo | Valor opcional | valor padrão |
|---|---|---|---|---|
| valor/modelo v | Valor de ligação | booleano/string/número | - | - |
| opções | Listar dados | variedade | - | - |
| chave de valor | nome da chave de valor | corda | - | valor |
| chave-rótulo | nome da chave do rótulo | corda | - | rótulo |
| tecla de opções (1.4.6) | nome da chave de opções | corda | - | opções |
| chave desabilitada (1.4.1) | nome da chave desabilitada | corda | - | desabilitado |
| chave do objeto (1.4.0) | O nome da chave quando o valor vinculado é um tipo de objeto | corda | - | valor |
| tamanho mínimo do item | Altura mínima para cada opção | número | - | 34 |
| múltiplo | Se deve selecionar vários | booleano | - | falso |
| desabilitado | Se desativar | booleano | - | falso |
| tamanho | Tamanho da caixa de entrada | corda | médio/pequeno/mini | - |
| eliminável | É possível limpar opções | booleano | - | falso |
| tags de colapso | Se o valor selecionado deve ser exibido como texto ao fazer seleções múltiplas | booleano | - | falso |
| limite múltiplo | O número máximo de itens que o usuário pode selecionar ao fazer seleções múltiplas. Se for 0, não há limite. | número | - | 0 |
| nome | atributo de nome da entrada selecionada | corda | - | - |
| preenchimento automático | atributo de preenchimento automático da entrada selecionada | corda | - | desligado |
| espaço reservado | espaço reservado | corda | - | Selecione |
| filtrável | É pesquisável? | booleano | - | falso |
| permitir-criar | Se os usuários têm permissão para criar novas entradas precisa ser usado com filterable | booleano | - | falso |
| método de filtro | Método de pesquisa personalizado | função | - | - |
| remoto | Quer seja uma pesquisa remota | booleano | - | falso |
| método remoto | Método de pesquisa remota | função | - | - |
| carregando | Se os dados estão sendo obtidos remotamente | booleano | - | falso |
| carregando texto | Texto exibido durante o carregamento remoto | corda | - | carregando |
| texto sem correspondência | O texto exibido quando nenhuma condição de pesquisa corresponde, você também pode usar a configuração slot="empty" | corda | - | Nenhum dado correspondente |
| texto sem dados | O texto exibido quando a opção está vazia também pode ser definido usando slot="empty" | corda | - | Sem dados |
| classe popper | Selecione o nome da classe na caixa suspensa | corda | - | - |
| palavra-chave reserva | Quando multisseleção e pesquisável, se a palavra-chave de pesquisa atual deve ser mantida após selecionar uma opção | booleano | - | verdadeiro |
| primeira opção padrão | Pressione Enter na caixa de entrada e selecione a primeira correspondência. Precisa ser usado com filterable ou remote | booleano | - | falso |
| popper-anexar ao corpo | Se deseja inserir a caixa pop-up no elemento body. Quando houver um problema com o posicionamento da caixa pop-up, você pode definir esta propriedade como falsa | booleano | - | verdadeiro |
| menu suspenso automático | Para seleção não pesquisável, se o menu de opções deve aparecer automaticamente após a caixa de entrada ganhar foco | booleano | - | falso |
| ajustar largura de entrada (1.1.0) | Se a largura da caixa suspensa for igual à da caixa de entrada. Depois de defini-la como falsa, a largura será calculada automaticamente e o desempenho será reduzido. | booleano | - | verdadeiro |
| nome do evento | ilustrar | parâmetros de retorno de chamada |
|---|---|---|
| mudar | Acionado quando o valor selecionado muda | Valor atual selecionado |
| mudança visível | Acionado quando a caixa suspensa aparece/oculta | Verdadeiro se aparecer, falso se estiver oculto |
| remover tag | Acionado quando a tag é removida no modo de seleção múltipla | Valor da tag removida |
| claro | Acionado quando o usuário clica no botão limpar no modo de rádio eliminável | - |
| borrão | Acionado quando a entrada perde o foco | (evento: Evento) |
| foco | Acionado quando a entrada recebe foco | (evento: Evento) |
| nome | ilustrar |
|---|---|
| - | Modelo personalizado, o parâmetro é { item } |
| cabeçalho (1.3.0) | Conteúdo no topo da lista suspensa |
| rodapé (1.3.0) | Conteúdo na parte inferior da lista suspensa |
| prefixo | Selecione o conteúdo do cabeçalho do componente |
| vazio | Lista sem opções |
| parâmetro | ilustrar | tipo | Valor opcional | valor padrão |
|---|---|---|---|---|
| valor | valor da opção | string/número/objeto | - | - |
| rótulo | O rótulo da opção Se não for definido, o padrão será o mesmo que value | string/número | - | - |
| opções (1.2.0) | Opções de agrupamento | variedade | - | - |
| desabilitado | Se deve desativar esta opção | booleano | - | falso |
| nome do método | ilustrar | parâmetro |
|---|---|---|
| foco | Faça com que a entrada ganhe foco | - |
| borrão | Faça a entrada perder o foco e oculte a caixa suspensa | - |
