快捷導(dǎo)航

vue 動態(tài)表單開發(fā)方法案例詳解

更新時間：2019年12月02日 11:21:06 作者：自由港

這篇文章主要介紹了vue 動態(tài)表單開發(fā)方法,結(jié)合具體案例形式詳細(xì)分析了vue.js動態(tài)表單相關(guān)原理、開發(fā)步驟與實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了vue 動態(tài)表單開發(fā)方法。分享給大家供大家參考，具體如下：

概要

動態(tài)表單指的是我們的表單不是通過vue 組件一個個編寫的，我們的表單是根據(jù)后端生成的vue模板，在前端通過vue構(gòu)建出來的。主要的思路是，在后端生成vue的模板，前端通過ajax的方式加載后端的表單模板，權(quán)限數(shù)據(jù)和表單數(shù)據(jù)，在前端使用vue進(jìn)行構(gòu)建出來。

表單渲染過程。

實現(xiàn)步驟

1.在前端開發(fā)表單組件，比如用戶組件，文本輸入組件。

在平臺中我們可以看到我們開發(fā)的組件。

組件的開發(fā)在第三篇有介紹。

我們定義的組件和后臺配置的權(quán)限相關(guān)。

我們每個組件都定義了：

permission：權(quán)限對象
permissionkey：權(quán)限對應(yīng)的key

2.手機(jī)端模板代碼

手機(jī)端模板是通過表單BO元數(shù)據(jù)生成的，我們可以在后端編輯手機(jī)端模板，我們現(xiàn)在看一下簡單的手機(jī)表單VUE的模板。

<script>// 表單公式計算
var formulas_2400000001371061={};
// 表單日期計算
var dateCalcs_2400000001371061={};
//實體擴(kuò)展JSON
var extJson_2400000001371061={};
//驗證規(guī)則
var validRule_2400000001371061={"main":{"age":{"vtype":"length:50"},"name":{"vtype":"length:50"},"mobile":{"vtype":"length:50"}}};</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">
    simpleform
  </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>

這個表單中：

我們可以看到我們自定義的組件，包括數(shù)據(jù)，權(quán)限部分，驗證規(guī)則部分。

3.后端提供的數(shù)據(jù)部分。

我們可以看下后端提供的數(shù)據(jù)：

[{
    "result": true,
    "msg": "",
    "type": "",
    "formKey": "simpleform",
    "content": "<script>// 表單公式計算\r\nvar formulas_2400000001371061={};\r\n// 表單日期計算\r\nvar dateCalcs_2400000001371061={};\r\n//實體擴(kuò)展JSON\r\nvar extJson_2400000001371061={};\r\n//驗證規(guī)則\r\nvar validRule_2400000001371061={\"main\":{\"age\":{\"vtype\":\"length:50\"},\"name\":{\"vtype\":\"length:50\"},\"mobile\":{\"vtype\":\"length:50\"}}};</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\">\r\n\t<div class=\"caption\">simpleform</div>\r\n\t<div class=\"form-container\">\r\n\t\t\t<div class=\"form\">\r\n\t\t\t\t<div class=\"form-title\">\r\n\t\t\t\t\tname\t\t\t\t</div>\r\n\t\t\t\t<div class=\"form-input\">\r\n\t\r\n\t\t\t\t<rx-input v-model=\"data.name\" permissionkey=\"name_form\" vtype=\"length:50\" :readonly=\"readonly\" :permission=\"permission.main\"></rx-input>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"form\">\r\n\t\t\t\t<div class=\"form-title\">\r\n\t\t\t\t\tage\t\t\t\t</div>\r\n\t\t\t\t<div class=\"form-input\">\r\n\t\r\n\t\t\t\t<rx-input v-model=\"data.age\" permissionkey=\"age_form\" vtype=\"length:50\" :readonly=\"readonly\" :permission=\"permission.main\"></rx-input>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"form\">\r\n\t\t\t\t<div class=\"form-title\">\r\n\t\t\t\t\tmobile\t\t\t\t</div>\r\n\t\t\t\t<div class=\"form-input\">\r\n\t\r\n\t\t\t\t<rx-input v-model=\"data.mobile\" permissionkey=\"mobile_form\" vtype=\"length:50\" :readonly=\"readonly\" :permission=\"permission.main\"></rx-input>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t</div></div>\r\n\t",
    "permission": "{\"main\":{\"age\":{\"require\":false,\"right\":\"w\"},\"name\":{\"require\":false,\"right\":\"w\"},\"mobile\":{\"require\":false,\"right\":\"w\"}}}",
    "jsonData": {
      "age": "",
      "name": "",
      "mobile": ""
    },
    "description": "simpleform",
    "viewId": "2400000001371078",
    "boDefId": "2400000001371061",
    "timeStamp": "1523799818000",
    "params": {}
  }]

這里看到后端返回的數(shù)據(jù)主要包括：