vue构建动态表单的方法示例

总结

后台管理系统中有很多表单需求，我们希望通过编写一个json格式的数据和vue的循环来动态呈现动态表单。并且可以从外部获取渲染表单的数据，并且可以重置表单。我把元素ui控件的下拉框、输入框、时间选择控件和vue-treeselect组合成了一个动态表单。

对v型的理解

我们来简单说说vue-model是怎么玩的。实际上，vue-model相当于向form元素传递一个值，并在外部监视输入事件。因此，当我们封装表单组件时，我们也可以传递一个值，并监听输入事件以获取输入值。

输入类型=' text ' v-model=' things '！-等效于-input type=' text ' v-bind : value=' things ' v-: input=' things=$ event。目标。“价值”包装形式组件

组件最重要的开发思想是设计输入和输出。以下拉框组件为例。对于一个简单的包，使用元素用户界面的下拉框。输入：name:各表单的数据标识，如areaCode输入框，父元素要传递areacode。

Value:表单选择/输入的值从父元素中获取并赋给currentValue，通过监控父元素的值实现同步转换。

选项：要在下拉框中呈现的选项值通常是对象数组。

输出：onInputEvent，emit是一个输入事件，这样父元素就可以感知组件的数据变化。

也就是说，您可以监听使用组件的输入事件

模板El-form-item : label=' label ' El-select v-model=' CurrentValue ' @ input=' OnInputEvent ' El-option v-for=' options '中的item ' : key=' item . value ' : label=' item . label ' : value=' item . value '/El-option/El-select/El-form-item/template script从导入formMixins './././mixin/form-model ' export default { name : ' SelectList '，prop :[' name '，' label '，' value '，' options']，mixin :[formmixin]，data(){ return { currentvalue : this . value } }，methods : { onInputEvent(value){ this。$emit('input '，this.name，value)；} }，watch : { value(val){ this . CurrentValue=val；} } }/编写一点封装脚本

因为每个表单组件都监视父元素的值的变化，当数据变化时，它会触发onInputEvent并执行它。$emit('input ')，因此我们可以提取这一部分并将其放入mixins中。

表单-model.js

导出默认值{ prop :[' name '，' value']，data(){ return { currentvalue : this . value }；}，methods: { onInputEvent(值){ this。$emit('input '，this.name，value)；}，reset(){ this . currentvalue=' '；} }，watch : { value(val){ this . CurrentValue=val；} }};那么我们的下拉框组件可以编写不太常见的代码，直接使用mixin :[formmixin]

模板El-form-item : label=' label ' El-select v-model=' CurrentValue ' @ input=' OnInputEvent ' El-option v-for=' options '中的item ' : key=' item . value ' : label=' item . label ' : value=' item . value '/El-option/El-select/El-form-item/template script从导入formMixins './././mixin/Form-model ' export default { name : ' select list '，prop :[' name '，' label '，' value '，' options']，mixin :[Form mixin]，data(){ return { current value 3360 this。value}}}/。

这里，表单组件是根据配置的数据循环生成的。默认提供提交和重置按钮，不需要的话可以通过插槽传递其他操作按钮。这里的要点是：

监控表单组件的数据更改：

每个表单组件都有一个名称来标识其业务含义，绑定的数据也是formData[field.name]。@input事件传输updateForm，this.formData[name]在updateForm中更新，以确保this.formData中的数据与表单组件选择/填写的内容一致。

重置时更改表单组件的数据：

因为组件内部会监听父元素的价值，所以这里只要清空this.formData的值，组件内部的数据也会跟着清空。

模板div El-form : inline=' true ' ref=' form ' : model=' form data ' class=' demo-form-inline ' El-col : span=' field。配置中的cols ' v-for='(字段，索引)。field config ' v-bind : key=' index ' component : key=' index ' 3: is=' field。字段类型“3:标签=”字段。标签“3333366/基本组件/选择列表”从导入文本输入"。/基本组件/文本输入”从导入时间选择"。/基本组件/时间选择器"从导入选择树"。/基本组件/选择树'导入工作人员选择编辑自。/business component/StaffSelectPopedit ' export default { name : ' form generator '，components: { SelectList，TextInput，TimeSelector，SelectTree，StaffSelectPopedit}，prop 3360[' config '，' value']，data(){ return { form data : this。值，onsubmittext : this。配置。按钮。onsubmittext | | '提交，OnResetText :这个。配置。按钮。OnResetText | | '重置} }，方法： { updateForm(字段名，值){ this。form data[字段名]=值；},提交(){这个.$ emit(' submit ')；}，reset(){ for(var name在此。表单数据){ if(此类型。表单数据==' String '){ this。表单数据[名称]=' '；} else { this。form data[name]=null；} } } } } } }/script业务使用的地方

像下拉框的选择数据，这些应该是后台渲染的，所以我们暂时用定时器模拟一下。感觉这里this.config.fieldsConfig[4].选择写的不太优雅，依赖于配置数据的顺序肯定不是啥好事情。求大神指点。

模板差异表单生成器： config=' config ' @ submit=' getFormData ' v-model=' formData '/表单生成器/div/templatescript从导入表单生成器'./components/form/form generator ' export default { name : ' FormGeneratorDemo '，components: { FormGenerator }，created(){ this。query order type()；这个。query tree()；}，data(){ return { form data : { order code : ' '，orderType: ' '，beginTime: ' '，endTime: ' '，area: []，staff: ' ' }，config : { field sconfig :[{ name : ' order code '，label: '定单编码，fieldType: 'TextInput '，cols: 8 }，{ name: 'orderType '，label: '定单类型，fieldType: 'SelectList '，options: []，cols: 8 }，{ name: 'beginTime '，label: '开始时间，fieldType: 'TimeSelector '，cols: 8 }，{ name: 'endTime '，label: '结束时间，fieldType: 'TimeSelector '，cols: 8 }，{ name: 'area '，label: '区域，fieldType: 'selectTree '，options: []，multiple: true，cols: 8 }，{ name: 'staff '，标签: '人员选择，字段类型： ' StaffSelectPopedit '，cols: 8 } ]，buttons: { onSubmitText: '提交，onResetText: '重置} } }，方法： { getFormData(){ console。日志(这个。form data)；}，查询顺序类型(){ setTimeout(()={ this。配置。字段图标[1].options=[ { label: 'select1 '，value: 'key1'}，{ label: 'select2 '，value: 'key2'}，{ label: 'select3 '，value : ' key 3 ' }]；}，100) }，query tree(){ this。配置。字段图标[4].options=[ { id: 'a '，label: 'a '，children: [{ id: 'aa '，label: 'AA '，}，{ id: 'ab '，label: 'AB '，}，}，{ id: 'b '，label: 'B '，}，{ id: ' c '，} }/script大概就是这样的思路，我们希望我们只要写上面那样子的配置数据就可以动态生成各种这样的表单组件，不用写一大堆重复代码。如果有更好的解决办法，欢迎和我联系。另外，代码路径https://github.com/supportlss/vue-dynamic-form

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。