vue-laravel-crud v1.6.17
vue-laravel-crud
npm i vue-laravel-crud
How its work?:
This component implements a table and actions to create, modify, delete by calling a standard api
- GET apiUrl/modelName - Retrieve paginated listing
- POST apiUrl/modelName/:id - Create item
- PUT apiUrl/modelName/:id - Update item
- DELETE apiUrl/modelName/:id - Delete item
Dependency:
- bootstrap-vue
- axios
- vuedraggable
Full Example:
JavaScript
import VueLaravelCrud from "vue-laravel-crud";
export default {
components: { VueLaravelCrud },
data() {
return {
title: "Crud Title",
modelName: 'users'
model: {
name: "",
email: "",
},
columns: [
{ label: "Name", prop: "name", type: "text" },
{ label: "Email", prop: "age", type: "number" },
],
selected: null,
//....
};
},
methods:{
onSelect(item){
this.selected = item;
}
//....
},
};
HTML
<vue-laravel-crud :title="title" :modelName="modelName" :model="model" :columns="columns">
<template v-slot:form="slotProps">
<b-form-group label="Name:" description="Your Name">
<b-form-input
v-model="slotProps.item.name"
type="text"
required
placeholder="Name"
></b-form-input>
</b-form-group>
</template>
<template v-slot:show="slotProps">
<b-list-group>
<b-list-group-item class="d-flex justify-content-between align-items-center">Id<b-badge variant="primary" pill>{{ slotProps.item.id }}</b-badge></b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">Nombre<b-badge variant="primary" pill>{{ slotProps.item.title }}</b-badge></b-list-group-item>
</b-list-group>
</template>
</vue-laravel-crud>
HTML
Selected: {{ selected ? selected.name : 'none' }}
<vue-laravel-crud :title="title" :modelName="modelName" :model="model" :columns="columns" @select="onSelect($event)">
<template slot="cell-name" slot-scope="slotProps">
<!-- Custom Cell Template cell-(prop) -->
<span class="bg-primary">{{ slotProps.item.name }}</span>
</template>
<template v-slot:tableActions="slotProps">
<span>Slot Actions</span>
</template>
<template v-slot:tableActionsRight="slotProps">
<span>Slot Right Actions</span>
</template>
<template v-slot:rowAction="slotProps">
<b-button variant="primary" @click="slotProps.showItem(slotProps.item.id, slotProps.index)"><b-icon-eye></b-icon-eye></b-button>
</template>
<template v-slot:form="slotProps">
<b-form-group label="Name:" description="Your Name">
<b-form-input
v-model="slotProps.item.name"
type="text"
required
placeholder="Name"
></b-form-input>
</b-form-group>
</template>
<template v-slot:show="slotProps">
<b-list-group>
<b-list-group-item class="d-flex justify-content-between align-items-center">Id<b-badge variant="primary" pill>{{ slotProps.item.id }}</b-badge></b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">Nombre<b-badge variant="primary" pill>{{ slotProps.item.title }}</b-badge></b-list-group-item>
</b-list-group>
</template>
</vue-laravel-crud>
Configuration
Propiedad | Descripción | Tipo | Valor |
---|---|---|---|
modelName | Nombre del modelo | String | requerido (ej.: users) |
model | Estructura del modelo | Object | requerido (ej.: { id: 0 } ) |
models | Lista de modelos | Array | requerido (ej.: [] ) |
ajax | Habilitar llamadas AJAX | Boolean | opcional, predeterminado: true |
useVuexORM | Usar Vuex ORM | Boolean | opcional, predeterminado: false |
columns | Array de columnas | Array | requerido (ej.: [{ label:"Id", prop: "id", type: "number" }] ) |
filter | Filtros de búsqueda | Array | opcional, predeterminado: [] |
enableFilters | Habilitar filtros | Boolean | opcional, predeterminado: false |
infiniteScroll | Desplazamiento infinito | Boolean | opcional, predeterminado: false |
sortable | Habilitar ordenamiento | Boolean | opcional, predeterminado: false |
orderable | Habilitar reordenamiento | Boolean | opcional, predeterminado: false |
validate | Validación de elementos | Boolean | opcional, predeterminado: false |
orderProp | Propiedad de ordenamiento | String | opcional, predeterminado: "order" |
createMultipart | Crear elementos multipart | Boolean | opcional, predeterminado: false |
apiUrl | URL base de la API | String | opcional, predeterminado: "/api" |
search | Término de búsqueda | String | opcional, predeterminado: "" |
hideModalAfterSave | Ocultar modal después de guardar | Boolean | opcional, predeterminado: true |
refreshAfterSave | Actualizar después de guardar | Boolean | opcional, predeterminado: true |
showPaginator | Mostrar paginador | Boolean | opcional, predeterminado: true |
showCreateBtn | Mostrar botón de creación | Boolean | opcional, predeterminado: true |
showSearch | Mostrar campo de búsqueda | Boolean | opcional, predeterminado: true |
showHeader | Mostrar encabezado | Boolean | opcional, predeterminado: true |
showTitle | Mostrar título | Boolean | opcional, predeterminado: true |
limit | Elementos por página | Number | opcional, predeterminado: 20 |
displayMode | Modo de visualización | Number | opcional, predeterminado: 1 |
displayModeToggler | Habilitar cambio de modo | Boolean | opcional, predeterminado: false |
colXs | Columnas en pantallas XS | Number | opcional, predeterminado: 12 |
colSm | Columnas en pantallas SM | Number | opcional, predeterminado: 12 |
colMd | Columnas en pantallas MD | Number | opcional, predeterminado: 6 |
colLg | Columnas en pantallas LG | Number | opcional, predeterminado: 4 |
colXl | Columnas en pantallas XL | Number | opcional, predeterminado: 3 |
selectHover | Seleccionar al pasar el mouse | Boolean | opcional, predeterminado: false |
selectClick | Seleccionar al hacer clic | Boolean | opcional, predeterminado: false |
cardClass | Clase de tarjeta | String | opcional, predeterminado: "" |
listContainerClass | Clase de contenedor de lista | String | opcional, predeterminado: "" |
listItemClass | Clase de elemento de lista | String | opcional, predeterminado: "" |
cardHideFooter | Ocultar pie de tarjeta | Boolean | opcional, predeterminado: false |
searchPlaceholder | Marcador de posición de búsqueda | String | opcional, predeterminado: "Buscar..." |
tableContainerClass | Clase de contenedor de tabla | String | opcional, predeterminado: "" |
tableClass | Clase de tabla | String | opcional, predeterminado: "" |
grouped | Agrupar elementos | Boolean | opcional, predeterminado: false |
groupedAttribute | Atributo de agrupación | String | opcional, predeterminado: "name" |
groupedLabelPre | Etiqueta de grupo anterior | String | opcional, predeterminado: "" |
groupedLabelAfter | Etiqueta de grupo posterior | String | opcional, predeterminado: "" |
draggableGroup | Grupo arrastrable | String | opcional, predeterminado: "people" |
draggableOptions | Opciones de arrastre | Object | opcional, predeterminado: { clone: false } |
Messages
Propiedad | Descripción | Tipo | Valor |
---|---|---|---|
messageRemoveConfirm | Mensaje de confirmación de eliminación | String | opcional, predeterminado: "¿Está seguro de borrar este elemento?" |
messageRemove | Mensaje de eliminación | String | opcional, predeterminado: "BORRAR" |
messageNew | Mensaje de nuevo elemento | String | opcional, predeterminado: "Nuevo" |
messageEmptyResults | Mensaje de resultados vacíos | String | opcional, predeterminado: "No se han encontrado resultados" |
messageNoMore | Mensaje de fin de resultados | String | opcional, predeterminado: "No hay más elementos para mostrar." |
messageLoading | Mensaje de carga | String | opcional, predeterminado: "Cargando..." |
messageSave | Mensaje de guardar | String | opcional, predeterminado: "Guardar" |
messageDefaultValidationError | Mensaje de error de validación por defecto | String | opcional, predeterminado: "Por favor controle el formulario, contiene errores." |
14 days ago
14 days ago
14 days ago
14 days ago
14 days ago
14 days ago
28 days ago
28 days ago
28 days ago
27 days ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
6 months ago
11 months ago
12 months ago
9 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago