vue構建動態表單

BlackHole1 發布于2019-08-26 12:20 / 2093人閱讀

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

概述

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

v-model的理解

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

封裝表單組件

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

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

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

一點封裝

由于每個表單組件都是監聽父元素的value值變化，數據變化時都是觸發onInputEvent并執行this.$emit("input"),所以我們可以把這部分內容抽取出來放在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]

動態生成表單

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

業務使用的地方

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

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

GPU云服務器云服務器 vue表單控件 php 動態改變表單用php輸出動態表單 Vue_Vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108534.html

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

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

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

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

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

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

hyuan 2019-08-26 11:49 評論0 收藏0
vue2 中如何實現動態表單增刪改查

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

StonePanda 2019-08-20 16:59 評論0 收藏0
vue2 中如何實現動態表單增刪改查

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

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