ng form elementplus

ng-form 致力於打造開源最強vue動態表單元件

NG-FORM-ELEMENTPLUS

說明

目前已經開始啟用2.0版本，配置基本相容1.x版本。差異部分如下：

1. 1.x中日期中透過屬性來配置是否可以範圍選擇，2.x版本拆成了兩個元件
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匯入方式進行還原。

和其他開源表單的差異

• 每個元件可以動態隱藏和顯示，並提供除了「必填」以外的多種規則驗證，支援表達式驗證和正規驗證
• 隱藏的元件綁定值可以配置不輸出，減少輸出資料大小
• 針對選擇性控制項（radio，select，checkbox）提供選擇後觸發調用，支援表達式。對選擇性控制支援資料連動功能，透過此功能可以做多級連動
• 動態表格提供單獨的彈框進行填寫和編輯
• 佈局方式多樣化，提供柵格，表格等多種佈局方式
• 支援表單預覽模式，表單內容全部非元件化，全部文字顯示
• 針對選擇性控制項（radio，select，checkbox）選擇後將對應的label進行單獨存儲，方便展示

組件

• 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群聊，可以直接提問及回饋bug 【交流群：152592057】