您现在的位置是：网站首页> 编程资料编程资料

vue和iview结合动态生成表单实例_vue.js_

2023-05-24 385人已围观

简介 vue和iview结合动态生成表单实例_vue.js_

一、构建myform组建

新建myForm.vue文件

1、结合vue和iveiw的框架，根据需求，对表单分一列，两列，多列展示，需要设置变量cols,表单项前面的文字宽度也不一样，因此还需设置变量labelWidth,渲染表单（展示你想展示的内容），需设置变量formDatas,最后，用户完成输入后还需获取表单数据，需要设置变了formDataModel。到此，配置表单大致需要的变量已基本设置完成。

大致代码如下：

2、一般情况下每个表单的下面都会有操作，比如确定，取消等，这样我们可以用slot插入来实现不同引用页面的功能

这样myform组件就大致完成，在上面的myform组建中，有一个myFormItem 的组建，下面我们就来实现myFormItem。

二、构建myFormItem组建

新建myFormItem.vue文件

myFormItem中，由于表单项有很多种，包括input,select,checkBox等，如果在这个组建中用v-if来控制显示，这样这个页面很臃肿，因此，采用函数式组建来和render函数来动态构建不同类型的表单

因此myFormItem组建代码大致如下：

三、构建函数式组件mycontrl组件

新建myContrl.js文件

函数式组件的大致结构如下，首先根据context中的类型进行分发，然后再用渲染函数渲染出来

function getControl(context){     let {type,label,placeholder,value} = context.props.shema;     return {type,label,placeholder,value} } export default{     functional:true,     props:{     schema:Object     },     render(h,context){         let {type,label,placeholder,value} = getControl(context);         return h('FormItem',{                  props:{                     label:label,                       },            },[             h(type,{             placeholder:placeholder,              value:value,             })         ])     } }

中间需注意的小细节：

1、由于一般设置必填项和非必填项的样式不一致，如果要用到iview里面的样式，需要在formItem下加class:‘ivu-form-item-required’,代码如下：

class:{         'ivu-form-item-required':isRequire,       },

2、如果表单项是select，checkBox等，在select下面会有option属性，因为都是动态输入的值，所以，要用render函数动态生成数组

keyValue.map(item=>{         return h(keyData,{           props:{            [keyData==='Option'?'value':keyData==='Button'?'icon':'label']:item.key,           }         },item.label)       })

到此，静态页面的渲染也就完成了。

四、用户输入的时候需要对表单项中进行各种验证或者逻辑

为了实现此功能，一般我们用到vue中的混入，将公用的验证，逻辑写到同一个文件中，再将每个表单中单独的逻辑放到引用这个表单的vue中。

因此在mycontrl.js文件的render函数中，要为每个表单项注册一个on-change或on-blur事件，然后触发对应的函数，并且设置此表单的对象的值。

1、设置表单项的值

context.parent.setValue(context.data.attrs.formObj,props,val);

2、判断是否必填进行操作

if(val==='' || val===null || val.length===0){     context.parent.Validate('rule-empty',`${label}id`,emptyTip);      return;    }else{      context.parent.ValidateHide('rule-empty',`${label}id`) }

3、规则验证判断

for(let r = 0;r

4、逻辑判断

logicRelation(val)

像类似前面的Validate，ValidateHide,setValue这些函数，都放在混入的js函数中，作为公共函数，而逻辑，规则下的验证函数就放在了每个配置表单的配置项里面了。以上所有的判断都写作on-blur或on-change中

五、表单输入完成获取表单中的值

这个写在myForm.vue中

1、在计算属性中，取得这个表单的项和值

computed:{     formDataModel:function(){     return this.getValue(this.formDatas);       }    }

2、点击确定按钮的时候，将这个值返回到传入确定按钮的这个函数中

    saveForm(fn,errFn){         let _this = this;         if(_this.isValidData(_this.formDatas,_this.formDataModel)){           fn(_this.formDataModel)         }else{           _this.$Message.error('表单输入有误！请按页面提示输入')           if(errFn){             errFn()           }         }       }

3、取消按钮，将值还原，或者是别的需要的操作

cancelForm(type,fn){   if(type==='modify'){     fn()  }else if(type==='close'){  this.$emit('closeModel')   }else{    this.backDefault(this.defaultValCopy,this.formDatas);   } }

六、在要用到表单的页面使用

配置项中的formData格式

       [ {             type:'InputNumber',             placeholder:"Web",             label:'Web',             value:1,             props:'web',             isRequire:true,             emptyTip:'Web不为空'           },           {//select选择框             type:'Select',             placeholder:"请选择要输入内容",             label:'记录',             data:{               Option:[               {key:'1',label:'记录'},               {key:'0',label:'不记录'},             ]             },             value:'1',             props:'record',             isRequire:true,             emptyTip:'请选择',             logicRelation:this.isHideKafka           }]

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：Vue enter回车导致页面刷新问题及解决_vue.js_

下一篇：next.js初始化参数设置getServerSideProps应用学习_javascript技巧_