使用Vue渲染可配置表單記一次問卷平台專案

近幾天來了個緊急專案，想要做乙個內部版本的問卷星。相當於可以編輯問卷並提供問卷展示，資料統計的這麼乙個平台。整個專案耗時不長，本著積澱和積累的原則，將過程中的思路和收穫進行一下沉澱。由於公司原因，**尚未開源。

不過沉澱了個動態配置表單的嘗試： github，用於後台快速開發表單等需求，搭配element-ui進行使用，同時可通過後台進行配置生成表單等。

or預覽

使用element進行後台以及問卷表單渲染是再合適不過的了。極大的節省了需要進行表單樣式修改的時間，同時，讓動態渲染表單成為一件可能且容易的事情。

剛好在專案之前，有過一次動態配置表單的嘗試： github 通過字段自動生成表單及驗證。但此時的資料格式相當於在後台已經確定好的，針對可變切頻繁變動的表單結構，確定資料結構如下：

資料結構

data: 
...] 
}...
]}

表單渲染

最簡單的 v-if 模式來滿足我們的需求，之前有想過使用is進行渲染，但是不同表單配置項相差很大，很難進行通用。因此採用類似以下這種方式，配置詳情可見element官網。

很簡單就可以將表單根據配置渲染出來啦：

思路理清楚了，就可以動手實踐啦！

首先，我需要各個問題的基本配置模板，以便於每次直接向questionlist中直接新增相應的內容，為了方便儲存及使用，將其放在store中,當

const state = ,
checkbox: ...
input: ...
}}//新增問題時，直接push進陣列即可
const mutations = [
//新增問題
addquestionlist(state, data) 
]//新增問題方法
addquestion(type) ,

注意

使用getter獲取到我們對應的baseset物件時，此物件為引用型別，並且，物件的屬性，如options也同樣為引用型別。我們若不進行處理，則會出現，建立兩個相同型別的問題時，對其中某一問題選項進行修改，另乙個選項也會進行修改。因此我們需要對base物件進行簡單的拷貝（只進行到陣列內容即可）

export const clone = function(obj) ;
for (let key in obj)  else  else 
}}  return newobj;
}addquestion(type) ,

這三點基本就是簡單的陣列操作啦，此時的問題資料依舊是引用型別，直接對引用陣列進行操作即可。簡單的上移，下移排序，使用splice即可實現。其實這三點都是用splice實現的哈。

deletequestion(index) ,
copyquestion(index) ,
movequestion(index, direct) 
list.splice(index - 1, 2, list[index], list[index - 1]);
} else 
list.splice(index, 2, list[index + 1], list[index]);
}}

使用qrcode.js,感謝大佬們為小輩們造出這麼多好用的輪子，讓我們站在巨人的肩膀上前行！

我們都知道，針對vue2.0後，使用computed獲取getters or state，而針對計算屬性，我們是無法進行寫操作的，像這樣

computed: )
},//以下**是無效的
this.qss = 2;

因此，我們更無法將qss屬性直接繫結在v-model上，很是苦惱。同事的一般處理方式是在data中書寫相同的屬性，在路由進入時對其進行初始化，當其修改時再寫回store。這樣寫起來未免有點麻煩且不妥當。那麼，該如何解決呢？

其實很簡單，可以交給父元件呀。

我們常常會聽到乙個詞，單向資料流，大概意思就是讓資料單一方向流動，我們只對資料來源進行修改，再讓資料從資料來源依次流動到子元件進行ui渲染。

其實就像我們使用ajax獲取資料時，統一交給父元件一樣，我們將統一獲取到的資料，使用props進行向下分發即可,使用vuex亦是如此。子元件值進行對應值的修改。而針對props，v-model可以很方便的對其進行修改了。當然這些只是我的一點理解，如果有異議，可以一起討論哈。

使用Vue渲染可配置表單記一次問卷平台專案

記一次Vue動態渲染路由的實現

記一次muse ui 使用

記一次vue splitpane使用

使用Vue渲染可配置表單 記一次問卷平台專案

記一次Vue動態渲染路由的實現

記一次muse ui 使用

記一次vue splitpane使用

相關推薦

使用Vue渲染可配置表單記一次問卷平台專案