Download Element Pro Crud - Download do código-fonte Element Pro Crud

Element Pro Crud

Outras categorias

1.0.0

Baixar

?ElementoProCrud?

ElementProCrud é uma ferramenta poderosa para construir CRUD rapidamente (considerarei atualizar totalmente a versão vue3 quando tiver tempo)

Documentação

Endereço do documento

Demonstração

O nome de domínio e o servidor expiraram... temporariamente indisponíveis, desculpe

Começar

Você pode importar todo o ElementProCrud ou apenas alguns dos componentes conforme necessário. Vamos primeiro apresentar como apresentar o ElementProCrud completo.

Introdução completa

Escreva o seguinte conteúdo em main.js:

 npm i element-pro-crud -s

 import Vue from 'vue'
import ElementProCrud from 'element-pro-crud'
import ElementUI from 'element-ui'
import 'element-pro-crud/lib/css/pro-crud.css'
import 'element-ui/lib/theme-chalk/index.css'

Vue . use ( ElementUI )
Vue . use ( ElementProCrud )

O código acima completa a introdução do ElementProCrud. Deve-se observar que o arquivo de estilo precisa ser importado separadamente.

Introduzir sob demanda

Com a ajuda do babel-plugin-component, só podemos introduzir os componentes necessários para reduzir o tamanho do projeto.

Primeiro, instale o componente babel-plugin:

 npm install babel - plugin - component - D

Em seguida, modifique .babelrc para:

 {
  presets : [ '@vue/cli-plugin-babel/preset' ] ,
  plugins : [
    [
      'component' ,
      {
        libraryName : 'element-pro-crud' ,
        styleLibrary : {
          name : 'css' ,
          base : false ,
        } ,
      } ,
    ] ,
  ] ,
} ;

A seguir, se você deseja apresentar apenas alguns componentes, como FormDesigner e ProForm, escreva o seguinte conteúdo em main.js:

 import Vue from 'vue'
import { ProForm , FormDesigner } from 'element-pro-crud'

Vue . use ( ProForm )
Vue . use ( FormDesigner )
new Vue ( {
  el : '#app' ,
  render : h => h ( App )
} )

Configuração global

Ao apresentar o ElementProCrud, você pode passar um objeto de configuração global. Fornece método de solicitação de axios para obter formulário json e solicitação CRUD geral. As operações específicas são as seguintes:

 {
  getFormDetail: formName => AxiosPromise ( formJSON ) // 传入获取表单json的axios请求
  getTableDetail: tableName => AxiosPromise ( tableJSON ) // 传入获取表格json的axios请求
  crud: ( dml : DML , tableName : string , data ?: object , params ?: object ) =>
    AxiosPromise // 通用CRUD请求封装
}

Consulte a documentação do tutorial de cada componente para obter detalhes.

CDN

Atualmente, a versão mais recente do recurso pode ser obtida em cdn.jsdelivr.net/npm/element-pro-crud/lib. Você pode começar a usá-lo introduzindo arquivos js e css na página.

Observe que o caso do nome do componente introduzido por cdn é kebab-case

Introdução global

 <!-- import ElementProCrud CSS -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/css/pro-crud.css " />
<!-- import ElementUI CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/element-ui/lib/theme-chalk/index.css " />

<!-- import Vue before Element -->
< script src =" https://unpkg.com/vue/dist/vue.js " > </ script >
<!-- import ElementUI -->
< script src =" https://unpkg.com/element-ui/lib/index.js " > </ script >
<!-- import ElementProCrud -->
< script src =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/pro-crud.js " > </ script >

Introduzir sob demanda

Por exemplo, apresente o designer de formulários separadamente

 <!-- import FormDesigner CSS -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/css/form-designer.css " />
<!-- import ElementUI CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/element-ui/lib/theme-chalk/index.css " />

<!-- import Vue before Element -->
< script src =" https://unpkg.com/vue/dist/vue.js " > </ script >
<!-- import ElementUI -->
< script src =" https://unpkg.com/element-ui/lib/index.js " > </ script >
<!-- import FormDesigner -->
< script src =" https://cdn.jsdelivr.net/npm/element-pro-crud/lib/form-designer.js " > </ script >

Lista de componentes

Nome do componente	ilustrar
`ProForm`	construtor de formulários
`ProTable`	construtor de tabela
`CrudTable`	Adicionar, excluir, modificar, consultar formulário
`FormDesigner`	designer de formulários
`TableDesigner`	designer de mesa

Bibliotecas de terceiros

Nome do componente	ilustrar	número da versão	ilustrar	Método de introdução (pode ser introduzido CDN ou NPM)
elemento-ui	IU Ele.me	`^2.15.1`	Precisa ser introduzido antes do element-pro-crud	https://unpkg.com/element-ui/lib/index.js
ás	Editor on-line de código	`^1.4.12`	Uso do Designer de Formulários/Designer de Tabelas	https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js
minúsculo	Editor de texto rico	`^4.7.5`	Uso do Designer de Formulários/Designer de Tabelas	https://cdn.bootcdn.net/ajax/libs/tinymce/4.7.5/tinymce.min.js
gráficos eletrônicos	gráfico de gráficos eletrônicos	`^5.0.1`	Uso do Designer de Formulários/Designer de Tabelas	https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js
seleção de árvore vue	Caixa suspensa de árvore	`^0.4.0`	Uso do Designer de Formulários/Designer de Tabelas	https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.umd.min.js