Vue动态生成表单组件可以根据数据配置表单使用的UI库是iView在Vue里一般要用到什么组件或数据都得提前声明所以要根据数据来生成表单只能使用Vue的render函数要做这一个组件其实并不难看一下Vue官方示例 再找个UI组件库差不多就能写出来如果对项目有兴趣可以fork或克隆项目自行研究有问题或BUG欢迎提issues
文档在线DEMO表单组件Input输入框Button按钮Radio单选框Checkbox多选框Icon图标Switch开关Select选择器Slider滑块DatePicker日期选择器TimePicker时间选择器Cascader级联选择器InputNumber数字输入框Rate评分Upload上传ColorPicker颜色选择器使用在单文件组件中引用npm i vue-form-makerimportVueFormMakerfrom'vue-form-maker'importViewUIfrom'view-design';import'view-design/dist/styles/iview.css';//如需使用城市数据可以这样引用//省市县import'vue-form-maker/dist/cityData3Level'//省市import'vue-form-maker/dist/cityData2Level'//城市数据文件定义了一个全局变量cityData在项目里直接使用cityData即可Vue.use(ViewUI)Vue.use(VueFormMaker)<template><divid="app"><VueFormMaker:options="options"/>//或者<vue-form-maker:options="options"/></div></template>在HTML文件中直接引用使用的是dist目录中的vue-form-maker.js
<link rel="stylesheet" type="text/css" href="iview.css"><divid="app"><vue-form-maker:options="options"/></div><scriptsrc="vue.js"></script><scriptsrc="iview.js"></script><scriptsrc="vue-form-maker.js"></script>如果对你有帮助，请给个Star
评论