系列文章目录

（一）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，等需要后台拉去数据的，都可以使用和借鉴。