資訊專欄INFORMATION COLUMN
摘要：介紹表單是一個(gè)基于的抽象組件，它能將格式的配置渲染為一個(gè)表單，在實(shí)際項(xiàng)目中，通過它可以快速的搭建出一個(gè)表單頁，這在端項(xiàng)目中，有著很廣泛的用途。如何使用表單的地址為。
介紹
JSON表單是一個(gè)基于React的抽象組件，它能將JSON格式的配置渲染為一個(gè)Form表單，在實(shí)際項(xiàng)目中，通過它可以快速的搭建出一個(gè)表單頁，這在B端項(xiàng)目中，有著很廣泛的用途。
JSON表單的優(yōu)點(diǎn)有以下幾點(diǎn)：
可以快速的構(gòu)建出一個(gè)表單
將表單的數(shù)據(jù)、邏輯、視圖分離，結(jié)構(gòu)簡單，進(jìn)一步抽象和維護(hù)也就比較容易
提供校驗(yàn)、自動緩存等額外功能，提升錄入體驗(yàn)
可以跨項(xiàng)目共用復(fù)雜的表單組件
在一個(gè)前端團(tuán)隊(duì)中，組件共用顯然是一件很有必要的事，但是對于表單組件來說，由于靈活度很高，如果沒有約定俗成的一套規(guī)則，抽象出來的表單組件其實(shí)用價(jià)值不是很高，那么，JSON表單提供的也就是一套規(guī)則，能夠使用JSON的數(shù)據(jù)格式去渲染抽象出來的表單組件。
原始表單在這里，我暫且將不是通過JSON表單渲染出來的表單稱為原始表單，以此來作為JSON表單的對比，在我開發(fā)過的大量的表單頁里，我經(jīng)常為以下的缺點(diǎn)所苦惱：
代碼量龐大，開發(fā)效率低
數(shù)據(jù)、邏輯、視圖雜糅，不便功能拆分和抽象
維護(hù)成本高
需要額外處理校驗(yàn)和緩存等功能
不同項(xiàng)目中很難共用表單組件
表單頁的代碼量是很龐大的，這是由于表單組件的重復(fù)編寫和處理表單校驗(yàn)等非主線功能，導(dǎo)致開發(fā)表單頁的效率很低下，并且由于表單頁的數(shù)據(jù)、邏輯、視圖雜糅在一起，后期需要拆分、抽象子功能模塊或者維護(hù)表單頁時(shí)，這將是一件很頭疼的事，
在B端項(xiàng)目中，表單是一個(gè)很常用的功能，對于復(fù)雜且多個(gè)項(xiàng)目中都用到的表單組件，往往都想將該表單組件抽象出來，但是原始表單組件的抽象成本很高，需要考慮在不同項(xiàng)目中的靈活度的問題，且沒有一套約定的規(guī)則，導(dǎo)致該組件的適用范圍很小。
如何使用JSON表單的github地址為：json_transform_form。
依賴環(huán)境React，基于React的抽象組件
async-validator，基于它做表單校驗(yàn)
安裝npm i json_transform_form --save一個(gè)栗子
import Form from "json_transform_form"
const config = {
formKey: "example-form",
data: {
name: "",
descr: "",
typeName: ""
},
config: [
{
type: "input",
dataKey: "name",
label: "param",
style: {
wrap: {
display: "inline-block",
width: 270,
}
},
},
{
type: "select",
dataKey: "typeName",
options: ["string", "integer", "float"],
style: {
wrap: {
display: "inline-block",
width: 100,
margin: "0 15px"
}
},
},
{
type: "textarea",
dataKey: "descr",
placeholder: "請輸入param含義",
label: "param含義",
style: {
wrap: {
width: 385,
}
}
},
]
}
this.FormWrap = ref} config={config}>
上面的代碼描述了三個(gè)常用表單組件組成的簡單表單，其效果如下圖所示：
JSON表單的詳細(xì)配置請看下節(jié)的JSON生成Form表單（二）。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/99314.html
摘要：嵌套組件配置如果表單組件里還含有其他表單組件，這時(shí)直接通過組件配置去渲染無疑能節(jié)約不少的工作量。請輸入方法傳入組件配置的列表就能渲染出表單組件來，需要注意的是，子表單組件的一定是基于父表單組件的。表單的實(shí)例方法請看下節(jié)的生成表單四 container表單組件 在實(shí)際的項(xiàng)目中，JSON表單提供的表單組件是遠(yuǎn)遠(yuǎn)不夠的，而且提供表單組件是一件低效的事，目前Ant Design組件庫提供的表單...
摘要：是校驗(yàn)表單組件數(shù)據(jù)正確性的字段，其值為數(shù)組，里面的數(shù)組元素可以為。所以數(shù)組元素如果為的話，其內(nèi)容就是的。到目前為止，表單適合大部分的表單應(yīng)用場景。 JSON表單 描述 JSON表單是一個(gè)基于React的抽象組件，它可以把JSON數(shù)據(jù)格式描述的表單轉(zhuǎn)換成項(xiàng)目中的表單，它可以用簡短的幾行代碼，快速的生成Form表單。JSON表單的優(yōu)點(diǎn)是： 可以快速構(gòu)建出一個(gè)表單 表單的數(shù)據(jù)、邏輯、視圖分...
摘要：配置表單的配置分為兩種，暫且稱描述表單信息的為表單配置，描述表單組件信息的為組件配置。組件組件主要是用來描述組件數(shù)據(jù)為數(shù)組格式的表單組件，其示例如下組件配置是基于父表單組件其效果圖如下表單的表單組件請看下節(jié)生成表單三 JSON配置 JSON表單的配置分為兩種，暫且稱描述表單信息的為表單配置，描述表單組件信息的為組件配置。JSON表單的配置一定是兩種配置的組合。 在開始講解配置之前先介紹...
摘要：表單實(shí)例方法靜態(tài)方法表單有一個(gè)靜態(tài)方法方法時(shí)表單的靜態(tài)方法，用來引入抽象出來的表單組件。首先需要開啟實(shí)時(shí)表單提交，在表單配置中設(shè)置為。到目前為止，表單適合大部分的表單應(yīng)用場景。 JSON表單實(shí)例方法 靜態(tài)方法 json表單有一個(gè)靜態(tài)方法：createCustomComp import Form from json_transform_form import components fro...
摘要：介紹是一個(gè)可以通過生成具有動態(tài)渲染數(shù)據(jù)收集驗(yàn)證和提交功能的表單生成器。并且支持生成任何組件。結(jié)合內(nèi)置種常用表單組件和自定義組件，再復(fù)雜的表單都可以輕松搞定。 介紹 form-create 是一個(gè)可以通過 JSON 生成具有動態(tài)渲染、數(shù)據(jù)收集、驗(yàn)證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結(jié)合內(nèi)置17種常用表單組件和自定義組件，再復(fù)雜的表單都可以輕松搞定。 文檔 | git...
閱讀 3006·2023-04-26 02:22
閱讀 2355·2021-11-17 09:33
閱讀 3251·2021-09-22 16:06
閱讀 1162·2021-09-22 15:54
閱讀 3598·2019-08-29 13:44
閱讀 2020·2019-08-29 12:37
閱讀 1373·2019-08-26 14:04
閱讀 1976·2019-08-26 11:57
