動態生成form表單,不再為表單煩惱

2021-09-12 02:08:39 字數 1154 閱讀 9315

具有資料收集、校驗和提交功能的表單生成器,支援雙向資料繫結和事件擴充套件,元件包含有核取方塊、單選框、輸入框、下拉選擇框等表單元素以及省市區**聯動,時間選擇,日期選擇,顏色選擇,滑塊,評分,框架,樹型,檔案/上傳等功能元件。

github | gitee |

圖例 demo

npm install form-create 複製** `npm install form-create

git clone

cd form-create

npm install

npm run dev 複製**

雙擊開啟 demo/index.html

引入

import vue from 'vue';

//**聯動資料,不用可以不引入

import 'form-create/district/province_city_area.js'

//示例規則,實際使用中不需要引入

import 'form-create/mock.js'

vue.use(iview);

vue.use(formcreat)

## 三種模式建立表單

說明: mock() 為表單生成規則 root 為表單插入節點 $f 為表單例項

## 標籤模式

標籤模式下 rule 規則發生變化會實時動態渲染表單

let rules = mock();

new vue(

},//初始化變數

$f: {},

model: {}

},mounted:function ()

});

複製**let rules = mock();

new vue(,

model:{}

},mounted:function ()

});//獲取雙向資料繫結的資料規則

this.model = this.$f.model();

}

js動態生成form表單並提交

在提交json資料時,可能會出後台無法解析資料的bug,碰到這個不要怕,在提交資料前用js轉一下json就好了,下面我寫的 裡有轉json的 如果只是傳單個資料,就沒必要寫成json格式了。exceldown click function params.name rows i areaname fo...

寬度 表單 Form表單

塊級元素和行內元素 1.塊級元素獨佔一行,行內元素在同一行顯示 2.塊級元素預設寬度為100 行內元素由內容撐開 3.塊級元素可以設定寬高,行內元素不可以設定寬高 4.塊級元素可以設定margin和padding和四個方向,行內元素只可以設定margin和padding和左右值,上下不起作用 5.塊...

關於表單(Form)

http協定基本的兩個請求方式為get與post,get請求方式為直接在請求的網址上傳送請求的相關資訊,例如 get login.jsp?user justin get請求方式由於是直接在網址上傳送請求的相關資訊,所以會在網址列上出現相關的請求資訊,例如 一些表頭 post資料本體 在設計表單的時候...