ng form elementplus

ng-form は、最も強力なオープンソース Vue 動的フォーム コンポーネントの作成に取り組んでいます。

NG-FORM-ELEMENTPLUS

説明する

現在、バージョン 2.0 が有効になっており、構成は基本的にバージョン 1.x と互換性があります。違いは次のとおりです。

1. 1.x では、日付は範囲選択が可能かどうかを決定する属性によって構成され、バージョン 2.x では 2 つのコンポーネントに分割されます。
2. 2.x バージョンでは、1.x 構成がインポートされた後、デフォルトでグリッド レイアウトがグローバルに使用され、各コンポーネントはデフォルトで 24 個のセルを占有します。

オンラインの例https://jjxliu306.github.io/ng-form-elementplus/dist

element-ui バージョンアドレスhttps://gitee.com/jjxliu306/ng-form-element

iview バージョンアドレスhttps://gitee.com/jjxliu306/ng-form-iview

バックエンドサービス

ngtool バックエンド解析および検証機能https://gitee.com/jjxliu306/ngtool

ドキュメント (継続的に更新)

http://www.ng-form.cn

##基本フォームのサンプル

フォーム検証とコンポーネントの動的表示

動的テーブル

導入

vue と element-plus をベースにしたフォームデザイナー。ドラッグ アンド ドロップでフォーム ページをすばやく生成でき、フォームを json 形式にエクスポートしたり、他の人が描画したフォームを json インポートを通じて復元したりできます。

他のオープンソースフォームとの違い

• 各コンポーネントは動的に非表示および表示することができ、「必須」に加えてさまざまなルール検証を提供し、式検証や定期検証をサポートします。
• 非表示のコンポーネントバインディング値を出力しないように設定でき、出力データサイズを削減できます
• 選択コントロール (ラジオ、選択、チェックボックス) の選択後のトリガー呼び出しを提供し、式をサポートします。多段階連携が可能な選択制御のデータ連携機能をサポート
• 動的フォームには、入力および編集用の個別のポップアップ ボックスが用意されています。
• グリッド、テーブルなどのレイアウト方法を提供し、多様なレイアウト方法を提供
• フォーム プレビュー モードをサポートし、すべてのフォーム コンテンツはコンポーネント化されておらず、すべてのテキストが表示されます。
• 選択コントロール (ラジオ、選択、チェックボックス) を選択すると、対応するラベルが簡単に表示できるように個別に保存されます。

コンポーネント

• ng-form-design フォーム デザイナー (視覚的な操作に基づいてフォーム ページをすばやくデザインし、構成 JSON またはページを生成します)
• ng-form-b​​uild フォームビルダー (デザイナーで取得した構成 json データに基づいてフォーム ページを迅速に構築し、readonly 属性を追加してプレビュー フォームを表示します)

インストール

 npm install --save  ng-form-elementplus

引用

 // 导入组件库
import NgFormElementPlus  from 'ng-form-elementplus'
import 'ng-form-elementplus/lib/style.css'

登録する

 const app = createApp(App)
 
// 注册组件库
app.use(NgFormElementPlus) 

参照ページ

 <div id="app"> 
    <ng-form-design  />
</div>

話し合う

リンクをクリックして QQ グループ チャットに参加し、直接質問したりバグを報告したりできます [コミュニケーション グループ: 152592057]