概述
後台管理系統裡面有非常多的表單需求，我們希望能夠通過寫乙個json格式的資料，通過vue的迴圈動態地去渲染動態表單。並且能夠在外部得到渲染出來的表單的資料，可以對表單進行重置操作。我結合element ui的控制項的下拉框,輸入框，時間選擇控制項和vue-treeselect，做了乙個動態表單。
v-model的理解
先簡單講一下vue-model是怎麼玩的。其實vue-model相當於給表單元素傳遞乙個value,外部監聽input事件。所以我們自己封裝表單元件的時候也是可以傳遞乙個value值，監聽input事件獲取輸入的值。
v-bind:value="something"
v-on:input="something = $event.target.value">
封裝表單元件
元件最重要的開發思想就是設計好輸入輸出。這裡就以下拉框元件為例吧。使用的是element ui的下拉框，進行乙個簡單封裝。
輸入：name:每個表單的資料標識，如區域編碼輸入框，父元素應該傳遞areacode過來。
value: 表單選擇/輸入的值，從父元素獲取後賦值給currentvalue，通過監聽父元素的值實現同步變
化。options:下拉框要渲染的選項值，一般是個物件陣列。
輸出：oninputevent，emit乙個input事件，讓父元素能夠感知元件的資料變化。
也就是可以在元件使用的地方監聽input事件
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
import formmixins from '../../../mixins/form-model'
export default }
} import selectlist from './basiccomponent/selectlist'
import textinput from './basiccomponent/textinput'
import timeselector from './basiccomponent/timeselector'
import selecttree from './basiccomponent/selecttree'
import staffselectpopedit from './businesscomponent/staffselectpopedit'
export default ,
props: ["config", "value"],
data() else ,
created () ,
,}, 100)
queryareatree() {
this.config.fieldsconfig[4].options = [
id: 'a',
label: 'a',
children: [{
id: 'aa',
label: 'aa',
id: 'ab',
label: 'ab',
id: 'b',
label: 'b',
id: 'c',
label: 'c',
大概就是這樣的思路，我們希望我們只要寫上面那樣子的配置資料就可以動態生成各種這樣的表單元件，不用寫一大堆重複**。如果有更好的解決辦法，歡迎和我聯絡。另外，**路徑
vue 下拉框 VUE this丟失
最近在乙個 vue 的專案中重構功能時，遇到乙個有趣的問題，場景是通過介面動態獲取名稱並顯示在下拉列表中，第一次實現的 如下 但這樣寫 可擴充套件性很低，例如這時候需要新增乙個查詢使用者身份的下拉框就要再寫乙個方法，為了避免複製一堆重複 所以我做了一些修改 但是在執行後，輸入名稱，檢視中的 opti...
jQuery動態生成select下拉框
前一陣在專案裡需要動態生成下拉框，找了一下用jquery實現比較方便，這裡整理一下。下文所述方法只是本人在專案中遇到問題的解決方法，場景較為簡單，也希望能幫助有需要的朋友 1 動態生成下拉框的兩種方式 1 將資料放在model中，jsp頁面用el表示式 取出，該方式缺點是資料更改時必須重新整理整個頁...
bootstrap select下拉框動態資料
select class selectpicker multiple selectpicker和multiple屬性的搭配使用可實現多選 data live search true 這個屬性的預設值是false,作用是開啟模糊篩查搜尋框。data max options 這個屬性表示最多可選幾個，搭...