vue構建動態表單

後台管理系統裡面有非常多的表單需求，我們希望能夠通過寫乙個json格式的資料，通過vue的迴圈動態地去渲染動態表單。並且能夠在外部得到渲染出來的表單的資料，可以對表單進行重置操作。我結合element ui的控制項的下拉框,輸入框，時間選擇控制項和vue-treeselect，做了乙個動態表單。

先簡單講一下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 ;
},methods: ,
reset() 
},watch: 
}};

然後我們的下拉框元件就可以少寫一些共用的**，直接用 mixins: [formmixins]

這裡主要是根據配置的資料，迴圈生成表單元件。預設提供提交和重置按鈕，如果不需要可以通過slot傳遞其他操作按鈕。這裡的要點主要有：

監聽表單元件的資料變化：

每個表單元件都有乙個name標識它的業務含義，繫結的資料也是formdata[field.name]，@input事件傳遞updateform，在updateform裡面更新this.formdata[name]，保證了this.formdata裡面的資料是和表單元件選擇/填寫的內容一致。

重置時改變表單元件的資料：

因為元件內部會監聽父元素的value，所以這裡只要清空this.formdata的值，元件內部的資料也會跟著清空。

}
}

像下拉框的選擇資料，這些應該是後台渲染的，所以我們暫時用settimeout模擬一下。感覺這裡this.config.fieldsconfig[4].options寫的不太優雅，依賴於配置資料的順序肯定不是啥好事情。求大神指點。

大概就是這樣的思路，我們希望我們只要寫上面那樣子的配置資料就可以動態生成各種這樣的表單元件，不用寫一大堆重複**。如果有更好的解決辦法，歡迎和我聯絡。另外，**路