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

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

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

概述

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

v-model的理解

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

封裝表單組件

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

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

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

一點(diǎn)封裝

由于每個(gè)表單組件都是監(jiān)聽父元素的value值變化，數(shù)據(jù)變化時(shí)都是觸發(fā)onInputEvent并執(zhí)行this.$emit("input"),所以我們可以把這部分內(nèi)容抽取出來(lá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]

動(dòng)態(tài)生成表單

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

業(yè)務(wù)使用的地方

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

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