vue element crud

Desafortunadamente, este repositorio ya no se mantiene, úselo bajo su propio riesgo.

Nota: Este proyecto puede tener algunos problemas en la implementación de componentes y, a medida que pasa el tiempo, las versiones del marco Vue y la biblioteca de UI de elementos también pueden actualizarse, lo que puede no ser adecuado para el presente y el futuro.

elemento-vue-crud

Un componente vue CRUD envuelto basado en los famosos componentes de vue UI: element-ui.

Un componente para agregar, eliminar, modificar y verificar basado en componentes element-ui .

Aquí hay una demostración simple.

Puede leer los ejemplos y el archivo de código fuente Crud.vue en el proyecto para ayudarlo a comprender el uso específico del componente.

Desarrollo local

Puede descargar o clonar este repositorio siempre que lo desee. Luego puede ejecutar scripts npm.

$ npm install
$ npm run dev

Abra una nueva terminal,

$ npm run build:watch

Uso

Puede utilizar vue-element-crud como complemento de vue o como componente de vue.

Si desea tratarlo como un componente, puede importar CRUD como componentes.

Como componente

 import { CRUD } from 'vue-element-crud'

export default {
  components : { 'crud' : CRUD }
}

De lo contrario, puedes tratarlo como un complemento.

Como complemento

Paso 1, proyecto inicial

Es posible que necesite iniciar un proyecto vue o tomar uno existente para continuar, ya que se requiere vue-loader o babel-loader o css-loader para element-ui.

$ vue init webpack < project-name > 

Paso 2, instalar

Este componente depende de element-ui y element-ui se instalará automáticamente cuando instale vue-element-crud , por lo que no es necesario instalar element-ui además.

$ npm install -S vue-element-crud

Paso 3, uso de vue

Agregue estas líneas a continuación a su main.js

 import 'element-ui/lib/theme-default/index.css'
import ElementUI from 'element-ui'
import CRUD from 'vue-element-crud'

Vue . use ( ElementUI )
Vue . use ( CRUD ) 

Paso 4, consulte los ejemplos

Puede leer los documentos o ejemplos para descubrir cómo implementar accesorios y métodos de este vue-element-crud.

API

accesorios	tipo	requerido	por defecto	descripción
datos	Formación	verdadero	---	Matriz de datos de tabla
forma	Objeto	verdadero	---	Objeto de formulario para almacenar variables de elementos de formulario
campos	Objeto	verdadero	---	Objeto que describe la estructura de los elementos del formulario, por ejemplo, { name: { label: 'name', length: 20, type: String, options: [{ label: 'Mike', value: 'Mike' }] }
normas	Objeto	FALSO	---	Objeto que describe las reglas de los elementos del formulario, por ejemplo, { name: [{ required: true, message: 'name is required.' }] }
tamaño	Cadena	FALSO	'large'	Tamaño del diálogo. 'full' o 'large' o small u omitido.
ancho de etiqueta	Cadena	FALSO	'100px'	Ancho de etiqueta del formulario y la tabla.
en línea	Booleano	FALSO	false	Determine si los elementos del formulario se encuentran en línea o no.
mesa	Objeto	FALSO	---	Si la estructura de la tabla no coincide con la estructura del formulario, puede especificarla, { name: 'name' } ejemplo.
comportamiento	Formación	FALSO	['create', 'destroy', 'update']	Las acciones crueles.
cargando	Booleano	FALSO	false	CRUD está en estado XHR. El botón Enviar se deshabilitó si es verdadero.
resaltarFilaActual	Booleano	FALSO	false	Resalte la fila actual de la tabla o no.
estilo de fila	Función	FALSO	---	Function(row, index) de estilo de fila de tabla.

eventos	descripción
abierto	evento de apertura de diálogo. establezca editing en verdadero para mostrar el diálogo.
cerca	evento de cierre del diálogo. establezca editing en falso para cerrar el diálogo.
crear	evento de creación de formulario. Debe asignar el modelo de formulario al form .
actualizar	evento de actualización del formulario. (row, index) pasado al controlador. Debe asignar una fila al form .
destruir	Evento de destrucción de fila de la tabla (row, index) pasado al controlador.
entregar	evento de envío de formulario. (status, closeDialog) closeDialog al controlador 0 significa creación y 1 significa actualización.
expandir	Evento de expansión de tabla. (row, expanded) pasado al controlador. Consulte eventos de tabla de elemento-ui.
clic en fila	evento de clic en la fila de la tabla (row, event, column) pasado al controlador. Consulte eventos de la tabla element-ui.
fila-dblclick	Evento dblclick de fila de tabla (row, event) pasado al controlador. Consulte eventos de tabla de elemento-ui.

tragamonedas	descripción
índice	Ranura de índice de fila de tabla Consulte ranuras de tabla de elemento-ui.
expandir	Ranura de expansión de tabla. Consulte ranuras de tabla element-ui.
anteponer	Ranura para anteponer la tabla.
por defecto	Ranura para agregar mesa.
Añadir	Ranura para complementos de formulario.

Su plantilla puede verse así.

 <crud :data="data" :form="form" :rules="rules" :fields="fields" inline index
    :editing="editing" @open="handleOpen" @close="handleClose"
    @create="handleCreate" @update="handleUpdate" @destroy="handleDestroy" @submit="handleSubmit"/>

Aquí hay un mixin simple que puede ayudarlo a iniciarlo. Simplemente importe Simple .

 import { Simple } from 'vue-element-crud'

export {
  mixins : [ Simple ]
} 

Contribuir

Si tiene algunas ideas sobre este componente, no dude en comunicárnoslo. Puede crear un nuevo número para mejorarlo.