schema form editor

Schema-Form-Hersteller

Schema-Form-Maker ist ein visueller Tabelleneditor, der auf VUE basiert.

Weitere Informationen finden Sie in Wiki -Verwandtschaftsanlagen |

Installationsabhängigkeit

Verwenden Sie das native NPM zur Installation und unterstützen Sie vorerst CNPM nicht

 npm install

(Weitere Informationen finden Sie in der Installation)

Führen Sie den Herausgeber aus

Nach Abschluss der Installation führen Sie aus

 npm run dev

Führen Sie den Formular Editor aus und öffnen Sie nach dem Start http://localhost:8080/ Zugriff.

(Weitere Informationen finden Sie in der Operation)

Form bauen

Insgesamt drei Bereiche in der linken, mittleren und rechten Seite des Formateditors: Insgesamt drei Bereiche:

Komponentenleiste

Die Sichtweise links ist die [Komponentenstange].

Gebiet Gebiet

Die Mitte der Ansicht ist [Baubereich], die die derzeit bearbeitete Form zeigt.
Nachdem Sie auf einen der Formulare geklickt haben, können Sie rechts im Menü [Konfiguration] bearbeitet werden.
Während des Bearbeitungsprozesses können Sie Strg + S oder CMD + S jederzeit speichern.

(Weitere Informationen finden Sie in der Form des formbauten Bereichs)

Konfigurationsmenü

Die rechte Seite der Ansicht ist das [Konfigurationsmenü], das auf den ausgewählten Formularelementen [Konstruktion] bearbeitet werden kann.

Exportschema

Klicken Sie nach Abschluss der Einstellung des Formulars am unteren Rand des Baubereichs auf die Schaltfläche [Struktur], um das Schema des Formulars im Dialogfeld Pop -up anzuzeigen.
In der oberen rechten Ecke des Schemas -Dialogfelds befinden sich zwei Schaltflächen von [Copy] und [Download], mit denen das Schema exportiert werden kann.

Rendering -Form

Nach dem Exportieren von Schema können Sie das Formular neu definieren, um das Formular in Ihrem eigenen Projekt mit Hilfe der Schema-Form-Render-Komponente zu erlösen.

Beispielcode:

< template >
  ...
    <!-- DeviceSchema 为渲染表单需要的 schema -->
    <!-- device 为表单数据 -->
    < SchemaFormRender
      :schema = " DeviceSchema "
      :data = " device "
    />
    < el-button @click = " updateDevice " >
      提交
    </ el-button >
  ...
</ template >
< script >
...
export default {
  ...
  methods : {
    async updateDevice () {
      // 用户操作表单后 this.device 的数据会实时更新
      // 这里可以直接通过 this.device 访问到表单中的数据
      await axios . put ( ` http://api.com/device/ ${ this . device . id } ` , this . device );
      this . $message . success ( '保存成功' );
    }
  }
}
</ script >