vue構(gòu)建動態(tài)表單

BlackHole1 發(fā)布于2019-08-26 12:20 / 2157人閱讀

摘要：概述后臺管理系統(tǒng)里面有非常多的表單需求，我們希望能夠通過寫一個格式的數(shù)據(jù)，通過的循環(huán)動態(tài)地去渲染動態(tài)表單。我結(jié)合的控件的下拉框輸入框，時間選擇控件和，做了一個動態(tài)表單。

概述

后臺管理系統(tǒng)里面有非常多的表單需求，我們希望能夠通過寫一個json格式的數(shù)據(jù)，通過vue的循環(huán)動態(tài)地去渲染動態(tài)表單。并且能夠在外部得到渲染出來的表單的數(shù)據(jù)，可以對表單進行重置操作。我結(jié)合element ui的控件的下拉框,輸入框，時間選擇控件和vue-treeselect，做了一個動態(tài)表單。

v-model的理解

先簡單講一下vue-model是怎么玩的。其實vue-model相當于給表單元素傳遞一個value,外部監(jiān)聽input事件。所以我們自己封裝表單組件的時候也是可以傳遞一個value值，監(jiān)聽input事件獲取輸入的值。

封裝表單組件

組件最重要的開發(fā)思想就是設計好輸入輸出。這里就以下拉框組件為例吧。使用的是element ui的下拉框，進行一個簡單封裝。
輸入：name:每個表單的數(shù)據(jù)標識，如區(qū)域編碼輸入框，父元素應該傳遞areaCode過來。

 value: 表單選擇/輸入的值，從父元素獲取后賦值給currentValue，通過監(jiān)聽父元素的值實現(xiàn)同步變 
        化。
 options:下拉框要渲染的選項值，一般是個對象數(shù)組。

輸出：onInputEvent，emit一個input事件，讓父元素能夠感知組件的數(shù)據(jù)變化。
也就是可以在組件使用的地方監(jiān)聽input事件

一點封裝

由于每個表單組件都是監(jiān)聽父元素的value值變化，數(shù)據(jù)變化時都是觸發(fā)onInputEvent并執(zhí)行this.$emit("input"),所以我們可以把這部分內(nèi)容抽取出來放在mixins里面。
form-model.js

export default {
  props: ["name", "value"],

  data () {
    return {
      currentValue: this.value
    };
  },
  methods: {
    onInputEvent(value) {
      this.$emit("input", this.name, value);
    },
    reset() {
      this.currentValue = "";
    }
  },
  watch: {
    value (val) {
      this.currentValue = val;
    }
  }
};

然后我們的下拉框組件就可以少寫一些共用的代碼，直接用 mixins: [formMixins]

動態(tài)生成表單

這里主要是根據(jù)配置的數(shù)據(jù)，循環(huán)生成表單組件。默認提供提交和重置按鈕，如果不需要可以通過slot傳遞其他操作按鈕。這里的要點主要有：
監(jiān)聽表單組件的數(shù)據(jù)變化：
每個表單組件都有一個name標識它的業(yè)務含義，綁定的數(shù)據(jù)也是formData[field.name]，@input事件傳遞updateForm，在updateForm里面更新this.formData[name]，保證了this.formData里面的數(shù)據(jù)是和表單組件選擇/填寫的內(nèi)容一致。
重置時改變表單組件的數(shù)據(jù)：
因為組件內(nèi)部會監(jiān)聽父元素的value，所以這里只要清空this.formData的值，組件內(nèi)部的數(shù)據(jù)也會跟著清空。

業(yè)務使用的地方

像下拉框的選擇數(shù)據(jù)，這些應該是后臺渲染的，所以我們暫時用setTimeout模擬一下。感覺這里this.config.fieldsConfig[4].options寫的不太優(yōu)雅，依賴于配置數(shù)據(jù)的順序肯定不是啥好事情。求大神指點。

大概就是這樣的思路，我們希望我們只要寫上面那樣子的配置數(shù)據(jù)就可以動態(tài)生成各種這樣的表單組件，不用寫一大堆重復代碼。如果有更好的解決辦法，歡迎和我聯(lián)系。另外，代碼路徑https://github.com/supportlss...

云服務器 GPU云服務器 vue表單控件 php 動態(tài)改變表單用php輸出動態(tài)表單 Vue_Vue

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/108534.html

vue項目中的常見問題（vue-cli版本3.0.0）

摘要：在要改變的樣式前加二問題去掉項目路徑中的主要用到的模式。這里建議你直接看官網(wǎng)的，版本的和版本的不同。當瀏覽器窗口變小時，組件寬度不隨窗口響應變小。這里我們需要沖突掉中的樣式，該值不能設置成可以改成小于即可。一、樣式問題 1.vue中使用less 安裝less依賴 npm install less less-loader --save-dev 在使用時在style標簽中加入 lang...

wangbjun 2019-08-22 16:08 評論0 收藏0
VUE

摘要：注意指令前面需要加，對指令傳遞數(shù)據(jù)賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實現(xiàn)自定義指令注冊完成。 vue Vue.js 構(gòu)建數(shù)據(jù)驅(qū)動的web界面庫。集中實現(xiàn)MVVM 的 VM層。容易與其他庫或項目整合通過盡可能簡單的API實現(xiàn)相應的數(shù)據(jù)綁定和組合的視圖組件核心：相應的數(shù)據(jù)綁定系統(tǒng)，數(shù)據(jù)與DOM保持同步數(shù)據(jù)驅(qū)動的視圖，普通的HTML模板中使用特殊的語...

bergwhite 2019-08-19 18:39 評論0 收藏0
vue 起步

摘要：的二大核心響應式數(shù)據(jù)變化當視圖發(fā)生改變，數(shù)據(jù)自動更新。組合的視圖組件頁面映射為組件樹劃分組件可復用利于維護。正在不斷的學習中希望各位指點錯誤，一起討論，一起進步，后續(xù)更新中 Vue是一套用于構(gòu)建用戶界面的漸進式框架，Vue的核心庫只關注視圖層，不僅容易上手，還便于與第三方庫既有項目整合，相互獨立而又可以任意整合。 showImg(https://segmentfault.com/img...

hyuan 2019-08-26 11:49 評論0 收藏0
vue2 中如何實現(xiàn)動態(tài)表單增刪改查

摘要：最近項目中遇到的需求是要操作大量的表單，之前的項目中有做過這方的研究，只不過是用來操作。添加操作上面的只是其中一個動態(tài)列表。最近項目中遇到的需求是要操作大量的表單，之前的項目中有做過這方的研究，只不過是用jquery來操作。項目A 先簡單說說以前項目A中的應用場景，可能有小伙伴兒也遇到相同的需求。A項目是公司的OA系統(tǒng)中有的項目，是用java的jsp渲染的頁面，需求是要改成：嵌入A...

StonePanda 2019-08-20 16:59 評論0 收藏0
vue2 中如何實現(xiàn)動態(tài)表單增刪改查

摘要：最近項目中遇到的需求是要操作大量的表單，之前的項目中有做過這方的研究，只不過是用來操作。添加操作上面的只是其中一個動態(tài)列表。最近項目中遇到的需求是要操作大量的表單，之前的項目中有做過這方的研究，只不過是用jquery來操作。項目A 先簡單說說以前項目A中的應用場景，可能有小伙伴兒也遇到相同的需求。A項目是公司的OA系統(tǒng)中有的項目，是用java的jsp渲染的頁面，需求是要改成：嵌入A...

mmy123456 2019-07-31 10:58 評論0 收藏0