Vue-form-generator-element-gt4w NPM

Sobre

Fields para vue-form-generator-gt4w módulo com suporte para o Element css framework.

Como usar

Adicione a biblioteca:

yarn add vue-form-generator-element-gt4w

Adicione a biblioteca no main.js:

import VueFormGeneratorElement from 'vue-form-generator-element-gt4w'
Vue.use(VueFormGeneratorElement)

Importe e registre o componente (vue-form-generator) no template:

import { component as VueFormGenerator } from 'vue-form-generator'
export default {
...
  components: { VueFormGenerator },
...
}

Use no template:

  el-form
    vue-form-generator(:schema="schema", :model="model", :options="formOptions")

Todas propriedades e ajustes possíveis podem ser encontrados aqui e aqui.

Props dessa biblioteca

Foram adicionadas novas props que podem ser passadas no JSON do schema, que dão suporte ao grid e gutter, basta passar dentro de cada field, exemplo:

fields: [
  ...
  {
    ...
    column: 12,
    gutter: '40',
    ...
  }
]

O mesmo serve para o groups.

Lembrando que as rows tem um total de 24 colunas, então se a soma de uma lnha passar de 24, automaticamente o próximo field irá para a linha debaixo.

Veja exemplo (biblioteca original) exemplo.

Lista de fields:

Screenshot