ng-form是致力打造開源最強(qiáng)vue動(dòng)態(tài)表單組件，目前已經(jīng)適配了element-ui版本和iview版本，后續(xù)會(huì)支持element-plus，ant design。

ng-form 致力打造開源最強(qiáng)vue動(dòng)態(tài)表單組件

組件一覽

碼云代碼地址：

element-ui： https://gitee.com/jjxliu306/ng-form-element ， 演示地址： http://jjxliu306.gitee.io/ng-form-element/

iview： https://gitee.com/jjxliu306/ng-form-iview ， 演示地址：https://jjxliu306.github.io/ng-form-iview/dist

示例

基礎(chǔ)表單

基礎(chǔ)表單

表單驗(yàn)證和組件動(dòng)態(tài)顯示

表單驗(yàn)證和組件動(dòng)態(tài)顯示

動(dòng)態(tài)表格

動(dòng)態(tài)表格

簡(jiǎn)介

基于vue和element-ui實(shí)現(xiàn)的表單設(shè)計(jì)器。通過(guò)拖拽方式快速生成一個(gè)表單頁(yè)面，表單可以導(dǎo)出json格式,也可以將其他人繪制的表單通過(guò)json導(dǎo)入方式進(jìn)行還原。

和其他開源表單的差異

• 每個(gè)組件可以動(dòng)態(tài)隱藏和顯示，并且提供除了“必填”以外的多種規(guī)則驗(yàn)證，支持表達(dá)式驗(yàn)證和正則驗(yàn)證
• 隱藏的組件綁定值可以配置不輸出，減少輸出數(shù)據(jù)大小
• 針對(duì)選擇性控件（radio，select，checkbox）提供選擇后觸發(fā)調(diào)用，支持表達(dá)式。對(duì)選擇性控件支持?jǐn)?shù)據(jù)聯(lián)動(dòng)功能，通過(guò)此功能可以做多級(jí)聯(lián)動(dòng)
• 動(dòng)態(tài)表格提供單獨(dú)的彈框進(jìn)行填寫和編輯
• 布局方式多樣化，提供柵格，表格等多種布局方式
• 支持表單預(yù)覽模式，表單內(nèi)容全部非組件化，全部文本顯示
• 針對(duì)選擇性控件（radio，select，checkbox）選擇后將對(duì)應(yīng)的label進(jìn)行單獨(dú)存儲(chǔ)，方便展示

組件

• ng-form-design 表單設(shè)計(jì)器（基于可視化操作快速設(shè)計(jì)出表單頁(yè)面，生成配置json或頁(yè)面）
• ng-form-build 表單構(gòu)建器（根據(jù)設(shè)計(jì)器中獲取的配置json數(shù)據(jù)，快速構(gòu)建出表單頁(yè)面，添加readonly屬性后展現(xiàn)預(yù)覽表單）

使用

安裝

npm install --save  ng-form-element // iview版本為 ng-form-iview

引用

 // 導(dǎo)入組件庫(kù) element-ui版本
import NgForm from 'ng-form-element' 
import 'ng-form-element/lib/ng-form-element.css'

//導(dǎo)入組件庫(kù) iview版本
import NgForm  from 'ng-form-element' 
import 'ng-form-iview/lib/ng-form-iview.css'

注冊(cè)

// 注冊(cè)組件庫(kù) 
Vue.use(NgForm) 

頁(yè)面引用

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

API 說(shuō)明

1. 表單繪制組件 ng-form-design

方法:

屬性:

插槽:

插槽示例:

 <ng-form-design >
       <template slot="controlButton" >
           <el-button   type="text" size="medium"  @click="initDemo(1)">示例1</el-button>
           <el-button   type="text" size="medium"  @click="initDemo(2)">示例2</el-button>
           <el-button   type="text" size="medium"  @click="initDemo(3)">示例3</el-button>
       </template>
       <template  slot="formName">
           <span> vue-drag-formdesign 示例 </span>
       </template>
   </ng-form-design> 

2. 表單查看/填報(bào)組件 ng-form-build

方法:

屬性:

使用示例:

   <template>
     <div id="app"> 
        <ng-form-build  :formTemplate="formTemplate" :models="models"/>
     </div>
   </template>
   <script>
   export default {
     data(){
       return {
         models: {} ,
         formTemplate: {}
       }
     },
     created() {
       this.formTemplate = require('./data/basic.json')
     }
   }
   </script>

3. 自定義組件示例

3.1 自定義一個(gè)組件（根據(jù)文本中輸入的地址展示圖片）

<template>
  <div> 
    <el-input
      v-if="!preview"
      type="textarea"
      autosize
      placeholder="請(qǐng)輸入圖片地址"
      v-model="models[record.model]" :disabled="disabled">
    </el-input> 
     <el-image
        :style="record.options.style ? record.options.style : null"
        :src="models[record.model]"
        fit="scale-down"></el-image> 
  </div> 
</template>
<script>
  export default { 
    props: {    
      record: {//組件數(shù)據(jù)
        type: Object,
        required: true
      }, 
      models: {// 表單數(shù)組 
        type: Object,
        required: true
      }, 
      disabled: { // 是否禁用
        type: Boolean,
        default: false
      } , 
      preview: {// 是否當(dāng)前是預(yù)覽
        type: Boolean ,
        default: false
      } 
    },
    methods: { 
    }
  }
</script>

3.2 定義一個(gè)自定義組件的屬性配置組件（后面通過(guò)插槽掛到表單繪制面板的屬性面板中）

<template>
  <!-- 自定義組件的屬性配置 -->  
  <el-form v-show="selectItem.key" size="mini" :disabled="disabled">
    <!-- TCustom   start-->
      <template v-if="selectItem.type == 'customT'"> 
            <!-- 開關(guān)的label -->
          <el-form-item   label="圖片樣式">
              <el-input type="textarea" placeholder="請(qǐng)輸入" v-model="selectItem.options.style" /> 
          </el-form-item>
      </template> 
      <!-- TCustom  end -->
  </el-form> 
</template>
<script>
export default {
  props: {
      selectItem: { // 當(dāng)前選擇的組件
        type: Object,
        required: true
      },
      disabled: { // 是否禁用
        type: Boolean,
        default: false
      }
  } 
}
</script>

3.3 在動(dòng)態(tài)表單繪制面板中進(jìn)行配置

<template>
  <div id="app">
    <ng-form-design ref="formDesign" :custom-components="customComponents" > 
      <!-- 自定義屬性配置 -->
      <template slot="custom-properties" slot-scope="{selectItem}">
        <Properties :selectItem="selectItem"/>
      </template> 
      <template  slot="formName">
        <span> vue-drag-formdesign 示例 </span>
      </template>
    </ng-form-design>   
  </div>
</template> 
<script>
// 引用自定義的表單組件和自定義組件配置信息修改組件
import CustomT from './components/TCustom'
import Properties from './components/properties'
export default {
  name: 'App',
  components: {CustomT , Properties},
  data(){
    return {  
      // 自定義組件列表
      customComponents: [
        { 
          type: 'customT' ,
          label: "自定義圖片展示", // 標(biāo)題文字 
          component: CustomT ,
          options: {
            style: 'width:100px;height:100px'
          },
          model: "customT",
          key: "customT",
          rules: [
            {
              required: false,
              message: "必填項(xiàng)"
            }
          ]
        },
      ]
    }
  } ,  
  methods: { 
  }
}
</script>
 

交流

點(diǎn)擊鏈接加入qq群聊，可以直接提問及反饋bug 【交流群：203205848】 <a target="_blank" ><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="vue-form-design" title="vue-form-design"></a>