vue element crud

Infelizmente, este repositório não é mais mantido, use-o por sua conta e risco.

Nota: Este projeto pode ter alguns problemas na implementação de componentes e, com o passar do tempo, as versões do framework Vue e da biblioteca de elementos UI também podem ser atualizadas, o que pode não ser adequado para o presente e o futuro.

vue-elemento-crud

Um componente vue CRUD empacotado baseado nos famosos componentes de UI vue - element-ui.

Um componente de adição, exclusão, modificação e verificação baseado em componentes element-ui .

Aqui está uma demonstração simples.

Você pode ler os exemplos e o arquivo de código-fonte Crud.vue no projeto para ajudá-lo a entender o uso específico do componente.

Desenvolvimento local

Você pode baixar ou clonar este repositório contanto que desejar. Em seguida, você pode executar scripts npm.

$ npm install
$ npm run dev

Abra um novo terminal,

$ npm run build:watch

Uso

Você pode usar vue-element-crud como um plugin vue ou como um componente vue.

Se quiser tratá-lo como um componente, você pode importar o CRUD como componentes.

Como componente

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

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

Caso contrário, você pode tratá-lo como um plugin.

Como plug-in

Etapa 1, projeto de inicialização

Você pode precisar iniciar um projeto vue ou usar um existente para continuar, pois vue-loader ou babel-loader ou css-loader são necessários para element-ui.

$ vue init webpack < project-name > 

Etapa 2, instalar

Este componente depende do element-ui, e element-ui será instalado automaticamente quando você instalar vue-element-crud , portanto, você não precisa instalar element-ui além disso.

$ npm install -S vue-element-crud

Etapa 3, uso do vue

Adicione estas linhas abaixo ao seu 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 ) 

Etapa 4, consulte exemplos

Você pode ler a documentação ou exemplos para descobrir como implementar adereços e métodos deste vue-element-crud.

API

adereços	tipo	obrigatório	padrão	descrição
dados	Variedade	verdadeiro	---	Matriz de dados da tabela
forma	Objeto	verdadeiro	---	Objeto de formulário para armazenar variáveis ​​de itens de formulário
campos	Objeto	verdadeiro	---	Objeto que descreve a estrutura dos itens do formulário, por exemplo. { name: { label: 'name', length: 20, type: String, options: [{ label: 'Mike', value: 'Mike' }] }
regras	Objeto	falso	---	Objeto que descreve regras de itens de formulário, por exemplo, { name: [{ required: true, message: 'name is required.' }] }
tamanho	Corda	falso	'large'	Dimensione a caixa de diálogo 'full' ou 'large' ou small ou omitida.
largura da etiqueta	Corda	falso	'100px'	Largura da etiqueta do formulário e da tabela.
em linha	Booleano	falso	false	Determine se os itens do formulário ficam in-line ou não.
mesa	Objeto	falso	---	Se a estrutura da tabela não estiver de acordo com a estrutura do formulário, você pode especificá-la, { name: 'name' } exemplo.
ações	Variedade	falso	['create', 'destroy', 'update']	As ações cruéis.
carregando	Booleano	falso	false	CRUD está no estado XHR. O botão Enviar foi desativado se for verdade.
destaqueCurrentRow	Booleano	falso	false	Destaque a linha atual da tabela ou não.
estilolinha	Função	falso	---	Função de estilo de linha da tabela Function(row, index)

eventos	descrição
abrir	evento de abertura de diálogo, defina editing como true para mostrar a caixa de diálogo.
fechar	evento de fechamento da caixa de diálogo defina editing como falsa para fechar a caixa de diálogo.
criar	evento de criação de formulário Você precisa atribuir o modelo de formulário ao form .
atualizar	evento de atualização de formulário. (row, index) passado para o manipulador. Você precisa atribuir uma linha ao form .
destruir	evento de destruição de linha da tabela (row, index) passado para o manipulador.
enviar	evento de envio de formulário. (status, closeDialog (status, closeDialog) passado para o manipulador 0 significa criação e 1 significa atualização.
expandir	evento de expansão de tabela. (row, expanded) passado para o manipulador.
clique em linha	evento de clique na linha da tabela (row, event, column) passado para o manipulador.
linha-dblclick	evento dblclick da linha da tabela (row, event) passado para o manipulador.

slots	descrição
índice	Slot de índice de linha da tabela Consulte slots de tabela element-ui.
expandir	Slot de expansão de tabela Consulte slots de tabela element-ui.
acrescentar	Slot de prefixo de tabela.
padrão	Slot de acréscimo de tabela.
adicionar	Slot adicional de formulário.

Seu modelo pode ser assim.

 <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"/>

Aqui está um mixin simples que pode ajudá-lo a inicializá-lo. Basta importar Simple .

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

export {
  mixins : [ Simple ]
} 

Contribuir

Se você tiver alguma idéia sobre este componente, não hesite em nos informar. Você pode criar um novo problema para melhorá-lo.