系列文章目錄

（一）vForm 動態表單設計器之使用

---

---

前言

動態表單下拉、選擇等組件，大概率要使用數據庫中的數據，那么vForm如何拿到數據庫中的數據呢？跟隨我的步驟，就能很快實現！

一、后端需提供接口

后端需提供可共查詢的接口,這里就隨便寫了，什么接口都可以！

注意：需要注意的是，vue中調用接口，使用的是axios，在vForm中同樣可以使用，在main.js中，需要將使用的axios對象，賦值給window，動態表就可以使用了。

import axios from './lib/request'
window.myAxios = axios

二、組件配置

1.設置組件唯一名稱

? ? ? ??

2.onMounted/onFormMounted

表單設置中的onFormMounted選項或組件設置中的onMounted中編寫代碼，然后保存

//對應組件唯一名稱
let sel =this.getWidgetRef('selectPr')
let params= {
}
myAxios.request({url:"/xxx/xxx",method:"post",data:params}).then(function(res) {let options = []if(res.data.code == 0 && res.data.data.list.length>0){for(let i=0;i<res.data.data.list.length;i++){let option = {label:res.data.data.list[i].name,value:res.data.data.list[i].id}options.push(option)}}sel.loadOptions(options)}).catch(function(error){console.log(error)})

保存后預覽

總結

到此就完成了下拉數據走后臺接口的抽取，此方法適用單選radio，多選checkbox，等需要后臺拉去數據的，都可以使用和借鑒。