elsa vue

Elsa

⚡ Elsa (eleme simple admin) é baseado em element-ui e encapsula el-form, el-table e outros componentes, e é adequado para desenvolvimento rápido de projetos de gerenciamento de back-end.

Para exemplos de uso, consulte: exemplo

Início rápido

 npm i elsa - vue - S 

 // vue main.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Elsa from 'elsa-vue'

Vue . use ( Element )
Vue . use ( Elsa ) 

Recurso

• else-card
  • Suporta configuração de principal e legendas
• outra tabela
  • Colunas de lista configuráveis
  • Controle de paginação de suporte
  • Suporta exibição de dados em forma de árvore e carregamento lento
• forma elsa
  • Componentes de formulário suportados
    • el-entrada
    • el-rádio
    • el-caixa de seleção
    • el-selecionar
    • el-upload
    • el-xxx-selecionador
  • Layout personalizado
  • Redefinição da soma de verificação do formulário
  • Análise de objetos aninhados
  • Configuração geral desativada do formulário
  • Informações de dicas para itens de formulário
  • Itens de formulário: dinâmico/vinculado
    • desabilitado/habilitado
    • mostrar/ocultar
    • Modifique dinamicamente várias opções de opções

mesa elsa

uso:

1. Obtenha a fonte de dados dataSource do tipo Array
2. Configure as informações da coluna exibida com base nas propriedades do objeto no dataSource.
3. Definir paginação de parâmetros de paginação

 < elsa-table border :columns =" columns " :dataSource =" dataSource " :pagination =" pagination " /> 

 export default {
  data ( ) {
    return {
      dataSource : [
        { name : 'eminoda' , age : 30 } ,
        { name : 'foo' , age : 40 } ,
        { name : 'bar' , age : 50 }
      ] ,
      columns : [
        { label : '序号' , align : 'center' , type : 'index' , width : '50' } ,
        { label : '姓名' , align : 'center' , prop : 'name' , width : '100' } ,
        { label : '年龄' , align : 'center' , prop : 'age' , width : '100' }
      ] ,
      pagination : {
        pageSize : 10 ,
        currentPage : 1 ,
        total : 0 ,
        currentChange : currentPage => { } ,
        sizeChange : pageSize => { }
      }
    }
  }
}

Atributos da ElsaTable

parâmetro	ilustrar	tipo	Valor opcional	valor padrão
colunas	Informações da coluna	Variedade
fonte de dados	fonte de dados	Variedade
paginação	Informações de paginação	Objeto
...elProps	atributo el-table

ElsaTable.colunas

parâmetro	ilustrar	tipo	Valor opcional	valor padrão
tipo	seleção adiciona uma coluna de caixa de seleção índice adiciona coluna de número de série expandir Mostrar mais	Corda	seleção/indexar/expandir
rótulo	título	Corda
adereço	analisar campos	Corda
largura	Largura da coluna correspondente	Corda
fixo	Quer a coluna esteja fixada à esquerda ou à direita, verdadeiro significa fixada à esquerda	String/Booleano	verdadeiro, esquerda, direita
formatador	Formatação de dados	Função (linha, coluna, cellValue)
mostrar-overflow-tooltip	Mostrar dica quando o conteúdo é muito longo e está oculto	Booleano

Para mais detalhes, consulte: coluna el-table

ElsaTable.elProps

parâmetro	ilustrar	tipo	Valor opcional	valor padrão
dados	Substitua por dataSource
fronteira	Se deve ter bordas verticais	Booleano		falso
tamanho	tamanho	Corda	médio/pequeno/mini
ajustar	Se a largura da coluna é autossustentável	Booleano		verdadeiro

Para obter mais detalhes, consulte: atributos el-table

Eventos ElsaTable

parâmetro	ilustrar	tipo	Valor opcional	valor padrão
mudança de seleção	Este evento é acionado quando a seleção muda	Função (seleções)

Para mais detalhes, consulte: eventos el-table

? Nota: Alguns eventos são difíceis de implementar com base na estrutura de arquivo atual (como: classificação, filtragem, mesclagem de formulários...) e podem ser implementados definindo o conteúdo do arquivo de configuração em dados (em vez do método de importação )

forma elsa

uso:

1. Definir modelo de modelo de dados de formulário
2. Configure o campo do formulário e defina o layout (opcional)

 < elsa-form :config =" fields " :model =" model " labelWidth =" auto " label-suffix =" : " >
  < el-row type =" flex " justify =" center " >
    < el-button @click =" submit " type =" primary " >提交</ el-button >
    < el-button @click =" reset " type =" warning " style =" margin-left:10px; " >重置</ el-button >
  </ el-row >
</ elsa-form > 

 export default {
  data ( ) {
    return {
      fields : {
        name : {
          label : '用户名' ,
          elTag : 'el-input' ,
          elAttrs : {
            placeholder : '请输入用户名'
          } ,
          customRender : 'nameCheck' ,
          rules : [ { required : true , message : '用户名不能为空' , trigger : 'change' } ]
        } ,
        password : {
          label : '密码' ,
          elTag : 'el-input' ,
          elAttrs : {
            type : 'password' ,
            showPassword : true
          } ,
          rules : [ { required : true , trigger : 'change' } ]
        }
      } ,
      model : {
        name : '' ,
        password : ''
      }
    }
  }
}

Atributos ElsaForm

parâmetro	ilustrar	tipo	Valor opcional	valor padrão
configuração	Configuração de item de formulário	Objeto
modelo	modelo de dados de formulário	Objeto
layout	layout do formulário	Matriz
desabilitado	Todo o formulário está desabilitado	Booleano		falso
...elProps	Configuração de item de formulário	Objeto

ElsaForm.config

parâmetro	ilustrar	tipo	Valor opcional	valor padrão
campo	Campos de item de formulário, correspondentes aos atributos do modelo	Objeto
campo.label	nome	Corda
campo.elTag	tag de formulário de elemento	Corda	el-input/select/radio/cascader/date-picker/time-picker/upload
campo.elAttrs	Atributos do item do formulário (consulte o componente elTag correspondente)	Objeto
campo.elStyle	Estilo de estilo de item de formulário	Objeto
campo.extra	Mensagem de alerta	Corda
campo.extraIcon	ícone de mensagem de alerta ícone	Corda		el-icon-warning-outline
campo.rules	Regras de validação de formulário	Variedade
opções de campo	Quando estiver marcado, select é usado como exibição de dados	Variedade
campo.visível	Linkage, você pode controlar a exibição e ocultação de acordo com o modelo[arquivado]	Booleano/String/Função({modelo})
campo.customRender	Modelo exibido no lado direito do elTag	Corda
campo.slotRender	Modelo dentro da elTag (por exemplo: conteúdo em upload)	Corda

Para obter mais detalhes, consulte: métodos el-form-item

ElsaForm.field.elAttrs

Exemplo de algumas propriedades especiais

parâmetro	ilustrar	tipo	Valor opcional	valor padrão
desabilitado	Desativar	Função({modelo})/ Booleano
éRemoto	elTag é carregamento lento de el-select	Booleano
método remoto	elTag é carregamento lento de el-select	Função(concluído,{model}) / Booleano
preguiçoso	elTag é o carregamento lento do el-cascader	Booleano
carga lenta	elTag é o carregamento lento do el-cascader	Função (nó, resolução, {concluído}) / Boolean

ElsaForm.layout

parâmetro	ilustrar	tipo	Valor opcional	valor padrão
elTag	tag de formulário de elemento	Corda	el-linha/col
elAttrs	Atributos do item do formulário (consulte o componente elTag correspondente)	Objeto
crianças	criança	Objeto
campo	campos de item de formulário	Corda

ElsaForm.elProps

parâmetro	ilustrar	tipo	Valor opcional	valor padrão
largura da etiqueta	A largura do rótulo do campo do formulário	Corda
sufixo-rótulo	Sufixo para rótulos de campos de formulário	Corda
tamanho	tamanho	Corda	médio/pequeno/mini

Para obter mais detalhes, consulte: atributos el-form

Métodos ElsaForm

parâmetro	ilustrar	tipo	Valor opcional	valor padrão
validar	Validação de dados de formulário	Função (errar, modelo)
redefinir campos	Redefinir item do formulário	Função(adereços<Array | String>)
limparValidar	Limpar resultados de verificação	Função(adereços<Array | String>)

Para obter mais detalhes, consulte: métodos el-form