在项⽬中，表单作为⽤户输⼊占⽤很重要的⼀部分，⽬前的前端框架，基本对表单进⾏了⼀些简单的封装，如果输⼊项很多，以iview为例，会有⼀⼤堆的类似：
<FormItem label="Input">
<Input v-model="formItem.input" placeholder=""></Input></FormItem>
这样的标签，现在将⽤
{//input输⼊框
type:'InputNumber',
placeholder:"请数量",
label:'数量',
value:1,
props:'num',
isRequire:true,
emptyTip:'数量不能为空'
},
这样的输⼊来简化，配置表单的⽣成。
⼀、构建myform组建
新建myForm.vue⽂件
1、结合vue和iveiw的框架，根据需求，对表单分⼀列，两列，多列展⽰，需要设置变量cols，表单项前⾯的⽂字宽度也不⼀样，因此还需设置变量labelWidth，渲染表单（展⽰你想展⽰的内容），需设置变量formDatas，最后，⽤户完成输⼊后还需获取表单数据，需要设置变了formDataModel。到此，配置表单⼤致需要的变量已基本设置完成。 ⼤致代码如下：
<Form ref="formValidate" :label-width="labelWidth" :model="formDataModel" class="leftLabel">
<Row :gutter="32">
<Col :span="cols" v-for="(item,index) in formDatas" :key="index">
<myFormItem :schema = "item" :key="index" :formObj="formDatas"></myFormItem>
</Col>
</Row>
</Form>
2、⼀般情况下每个表单的下⾯都会有操作，⽐如确定，取消等，这样我们可以⽤slot插⼊来实现不同引⽤页⾯的功能
<section>
<slot name="btnCancel" :cancelFormBtn="cancelForm"><Button type="default">取消</Button></slot>
<slot name="btnSave" :saveFormBtn="saveForm"><Button type="primary">确定</Button></slot>
</section>
这样myform组件就⼤致完成，在上⾯的myform组建中，有⼀个myFormItem 的组建，下⾯我们就来实现myFormItem。
⼆、构建myFormItem组建
新建myFormItem.vue⽂件
myFormItem中，由于表单项有很多种，包括input,select,checkBox等，如果在这个组建中⽤v-if来控制显⽰，这样这个页⾯很臃肿，因此，采⽤函数式组建来和render函数来动态构建不同类型的表单 因此myFormItem组建代码⼤致如下：
<my-contrl :schema="schema" :formObj="formObj"></my-contrl>
三、构建函数式组件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<rules.length;r++){
let flag = rules[r].valide(val);
超导磁流体if(flag){烟气分析
context.parent.ValidateHide(`rule-${rules[r].name}`,`${label}id`)
}else{
context.parent.Validate(`rule-${rules[r].name}`,`${label}id`,rules[r].tip);
break;
}
}
return;
4、逻辑判断
logicRelation(val)
像类似前⾯的Validate，ValidateHide,setValue这些函数，都放在混⼊的js函数中，作为公共函数，⽽逻辑，规则下的验证函数就放在了每个配置表单的配置项⾥⾯了。以上所有的判断都写作on-blur或on-change中
五、表单输⼊完成获取表单中的值
这个写在myForm.vue中
1、在计算属性中，取得这个表单的项和值
computed:{
formDataModel:function(){
Value(this.formDatas);
}
}
2、点击确定按钮的时候，将这个值返回到传⼊确定按钮的这个函数中
saveForm(fn,errFn){
let _this = this;
if(_this.isValidData(_this.formDatas,_this.formDataModel)){
fn(_this.formDataModel)
}else{
_this.$('表单输⼊有误！请按页⾯提⽰输⼊')
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);
}
}
六、在要⽤到表单的页⾯使⽤
<my-form :formData="formDatas" :cols="12" :labelWidth="100">
<template v-slot:btnCancel ="{cancelFormBtn}">
<Button type="default" @click="cancelFormBtn('modify',getlist)">取消</Button>
</template>
<template v-slot:btnSave ="{saveFormBtn}" >
<Button type="primary" @click="saveFormBtn(save)">保存</Button>
</template>
</my-form>
配置项中的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 }]
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议