Inicio>código fuente PHP>Otras categorias
Descargar

elsa

⚡ elsa (eleme simple admin) se basa en element-ui y encapsula el-form, el-table y otros componentes, y es adecuado para el desarrollo rápido de proyectos de gestión de backend.

Para ejemplos de uso, consulte: ejemplo

Inicio 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 )

Característica

  • otra tarjeta
    • Admite la configuración de título principal y subtítulos.
  • otra mesa
    • Columnas de lista configurables
    • Control de paginación de soporte
    • Admite visualización de datos en forma de árbol y carga diferida
  • forma-elsa
    • Componentes de formulario soportados
      • entrada el
      • el-radio
      • el-casilla de verificación
      • el-seleccionar
      • el-subir
      • el-xxx-selector
    • Diseño personalizado
    • Restablecer suma de verificación del formulario
    • Análisis de objetos anidados anidados
    • Configuración general deshabilitada del formulario
    • Información de sugerencias para elementos de formulario
    • Elementos del formulario: dinámico/vinculado
      • deshabilitado/habilitado
      • mostrar/ocultar
      • Modificar dinámicamente múltiples opciones de opciones

mesa-elsa

uso:

  1. Obtener la fuente de datos dataSource de tipo Array
  2. Configure la información de la columna mostrada en función de las propiedades del objeto en el origen de datos.
  3. Establecer paginación de parámetros de paginación 
 < 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 de ElsaTable

parámetro ilustrar tipo Valor opcional valor predeterminado
columnas Información de la columna Formación
fuente de datos fuente de datos Formación
paginación Información de paginación Objeto
...elProps atributo el-table

ElsaTable.columnas

parámetro ilustrar tipo Valor opcional valor predeterminado
tipo la selección agrega una columna del cuadro de selección
El índice agrega la columna del número de serie.
ampliar Mostrar más		 Cadena selección/indice/expandir
etiqueta título Cadena
apuntalar campo de análisis Cadena
ancho Ancho de columna correspondiente Cadena
fijado Ya sea que la columna esté fijada a la izquierda o a la derecha, verdadero significa fijada a la izquierda Cadena/Booleano verdadero, izquierda, derecha
formateador Formato de datos Función (fila, columna, valor de celda)
mostrar información sobre herramientas de desbordamiento Mostrar información sobre herramientas cuando el contenido es demasiado largo y está oculto Booleano

Para obtener más detalles, consulte: columna el-table

ElsaTable.elProps

parámetro ilustrar tipo Valor opcional valor predeterminado
datos Reemplazar con fuente de datos
borde Si tener bordes verticales Booleano FALSO
tamaño tamaño Cadena mediano/pequeño/mini
adaptar Si el ancho de la columna es autoportante. Booleano verdadero

Para obtener más detalles, consulte: atributos de el-table

Eventos ElsaTable

parámetro ilustrar tipo Valor opcional valor predeterminado
cambio de selección Este evento se activa cuando cambia la selección. Función (selecciones)

Para obtener más detalles, consulte: eventos el-table

Nota: Algunos eventos son difíciles de implementar según la estructura del archivo actual (como: ordenar, filtrar, fusionar formularios...). Puede definir el contenido del archivo de configuración en datos (en lugar del método de importación).

forma-elsa

uso:

  1. Definir modelo de modelo de datos de formulario
  2. Configurar el campo del formulario y definir el diseño (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 de ElsaForm

parámetro ilustrar tipo Valor opcional valor predeterminado
configuración Configuración de elementos de formulario Objeto
modelo modelo de datos del formulario Objeto
disposición diseño del formulario matriz
desactivado Todo el formulario está deshabilitado. booleano FALSO
...elProps Configuración de elementos de formulario Objeto

ElsaForm.config

parámetro ilustrar tipo Valor opcional valor predeterminado
campo Campos de elementos de formulario, correspondientes a los atributos del modelo. Objeto
etiqueta.campo nombre Cadena
campo.elTag etiqueta de forma de elemento Cadena el-input/select/radio/cascader/selector de fecha/selector de hora/carga
campo.elAttrs Atributos del elemento de formulario (consulte el componente correspondiente de elTag) Objeto
campo.elStyle Estilo de elemento de formulario Objeto
campo.extra Mensaje rápido Cadena
campo.extraIcon icono de mensaje rápido Cadena el-icono-esquema-de-advertencia
reglas.de.campo Reglas de validación de formularios Formación
opciones.de.campo Cuando se marca, la selección se utiliza como visualización de datos. Formación
campo.visible Enlace, puede controlar la visualización y ocultación según el modelo[archivado] Booleano/Cadena/Función({modelo})
campo.renderizado personalizado Plantilla mostrada en el lado derecho de elTag Cadena
campo.slotRender Plantilla dentro de elTag (por ejemplo: contenido en carga) Cadena

Para obtener más detalles, consulte: métodos el-form-item

ElsaForm.field.elAttrs

Ejemplo de algunas propiedades especiales

parámetro ilustrar tipo Valor opcional valor predeterminado
desactivado Desactivar Función({modelo})/Booleano
esRemoto elTag es una carga diferida de el-select booleano
método remoto elTag es una carga diferida de el-select Función (hecho, {modelo}) / booleano
perezoso elTag es una carga diferida de el-cascader Booleano
carga diferida elTag es una carga diferida de el-cascader Función (nodo, resolución, {hecho}) / booleano

ElsaForm.diseño

parámetro ilustrar tipo Valor opcional valor predeterminado
elTag etiqueta de forma de elemento Cadena el-fila/col
elAttrs Atributos del elemento de formulario (consulte el componente correspondiente de elTag) Objeto
niños niño Objeto
campo campos de elementos de formulario Cadena

ElsaForm.elProps

parámetro ilustrar tipo Valor opcional valor predeterminado
ancho de etiqueta El ancho de la etiqueta del campo del formulario. Cadena
sufijo de etiqueta Sufijo para etiquetas de campos de formulario Cadena
tamaño tamaño Cadena mediano/pequeño/mini

Para obtener más detalles, consulte: atributos de formulario el

Métodos ElsaForm

parámetro ilustrar tipo Valor opcional valor predeterminado
validar Validación de datos del formulario Función (errar, modelo)
restablecer campos Restablecer elemento del formulario Función (accesorios <Matriz | Cadena>)
borrarValidar Borrar resultados de verificación Función (accesorios <Matriz | Cadena>)

Para obtener más detalles, consulte: métodos el-form

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo