vue 開發系列（八） 動態表單開發

動態表單指的是我們的表單不是通過vue 元件乙個個編寫的，我們的表單是根據後端生成的vue模板，在前端通過vue構建出來的。主要的思路是，在後端生成vue的模板，前端通過ajax的方式載入後端的表單模板，許可權資料和表單資料，在前端使用vue進行構建出來。

表單渲染過程。

在平台中我們可以看到我們開發的元件。

元件的開發在第三篇有介紹。

我們定義的元件和後台配置的許可權相關。

我們每個元件都定義了：

permission： 許可權物件

permissionkey：許可權對應的key

手機端模板是通過表單bo元資料生成的，我們可以在後端編輯手機端模板，我們現在看一下簡單的手機表單vue的模板。

<

script
>
//表單公式計算
varformulas_2400000001371061
={};
//表單日期計算
vardatecalcs_2400000001371061
={};
//實體擴充套件json
varextjson_2400000001371061
={};
//驗證規則
varvalidrule_2400000001371061=,
"name":,
"mobile
":}};
script
>
<
yd-popup 
v-model
="showuserdialog"
position
="center"
width
="100%"
>
<
rx-sysuser 
:single
="singleuser"
ref="sysuser"
v-on:ok
="selectuser"
v-on:cancel
="closeuserdialog()"
>
rx-sysuser
>
yd-popup
>
<
yd-popup 
v-model
="showgroupdialog"
position
="center"
width
="100%"
>
<
rx-sysgroup 
:single
="singlegroup"
ref="sysgroup"
v-on:ok
="selectgroup"
v-on:cancel
="closegroupdialog()"
>
rx-sysgroup
>
yd-popup
>
<
div 
class
="div-form"
>
<
div 
class
="caption"
>
******form
div>
<
div 
class
="form-container"
>
<
div 
class
="form"
>
<
div 
class
="form-title"
>
name                
div>
<
div 
class
="form-input"
>
<
rx-input 
v-model
="data.name"
permissionkey
="name"
vtype
="length:50"
:readonly
="readonly"
:permission
="permission.main"
>
rx-input
>
div>
div>
<
div 
class
="form"
>
<
div 
class
="form-title"
>
age                
div>
<
div 
class
="form-input"
>
<
rx-input 
v-model
="data.age"
permissionkey
="age"
vtype
="length:50"
:readonly
="readonly"
:permission
="permission.main"
>
rx-input
>
div>
div>
<
div 
class
="form"
>
<
div 
class
="form-title"
>
mobile                
div>
<
div 
class
="form-input"
>
<
rx-input 
v-model
="data.mobile"
permissionkey
="mobile"
vtype
="length:50"
:readonly
="readonly"
:permission
="permission.main"
>
rx-input
>
div>
div>
div>
div>

我們可以看到我們自定義的元件，包括資料，許可權部分，驗證規則部分。

我們可以看下後端提供的資料：

[,\"name\":,\"mobile\":}}",

"jsondata": ,
"description": "******form",
"viewid": "2400000001371078",
"bodefid": "2400000001371061",
"timestamp": "1523799818000",
"params": {}
}]

content ：表單內容

permission：表單許可權

jsondata：表單資料

步驟：1.將html放到容器中。

2.使用vue 將資料和模版渲染到容器中。

vue 開發系列 元件開發

vue 的乙個特點是進行元件開發，元件的優勢是我們可以封裝自己的控制項，實現重用，比如我們在平台中封裝了自己的附件控制項，輸入控制項等。在vue 中乙個元件，就是乙個獨立的.vue 檔案，這個檔案分為三部分。1.模板 2.指令碼 3.樣式 我們看乙個系統中最常用的元件。if right r clas...

C語言 動態庫簡單開發

動態庫專案 簡單的動態庫開發 報文傳送 define crt secure no warnings include include include 定義上下文結構體 typedef struct sck handlesck handle 初始化上下文 declspec dllexport int c...

基於React的表單開發的分析 上

本文主要講解後台系統與表單相關的頁面開發，並分析如何才能更好地 高效地開發。antd 以下我都將ant design 簡稱為 antd ant design是個服務於企業級產品的ui框架，主要可以用於中後台系統,它有基於react vue和angular的實現。個人感覺antd還是很強大的,api相...