vue动态生成表单并加验证规则,input输入框无法输入
vue动态生成表单,input输入框无法输入前言开始需要注意的地方前言开发过程中,遇到一个页面是纯表单配置页面,表单项有四五十个,于是只能想办法动态生成。开始1、后台返回数据格式为:```formData: [{surplusValue: 100,usedValue: 0,quotasValue: 100...
前言
开发过程中,遇到一个页面是纯表单配置页面,表单项有四五十个,于是只能想办法动态生成。
开始
1、后台返回数据格式为:
```
formData: [{
surplusValue: 100,
usedValue: 0,
quotasValue: 100,
resourceType:"instance"
},{
surplusValue: 2000,
usedValue: 0,
quotasValue: 2000,
resourceType: "cpu"
}]
```
我需要以每一项的resourceType为变量名进行双向绑定。
2、在data里声明双向绑定的变量名对象为 formInfo:{},在created里取到后台数据formData,并对数据进行处理。循环formData,拿到resourceType的值并以此当做formInfo的属性名。注意在为formInfo新增属性时,如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。因为Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property),所以当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:
Vue.set(vm.obj, ‘e’, 0)
formData.forEach((item,idx)=>{
this.$set(this.formInfo,item.resourceType,'');
})
3、在模板里直接使用就可以了。
<el-form-item v-for="(item,idx) in formData" :label="item.resourceType" :prop="item.resourceType" >
<el-input size="small" v-model="formInfo[item.resourceType]" :placeholder="item.quotasValue"></el-input>
<i>已使用:{{item.usedValue }}</i>
<span>剩余:{{item.surplusValue}}</span>
</el-form-item>
4、加验证规则rules。data里定义空对象rules。在处理formData时候,为rules添加每项规则。
this.formData.forEach((item,idx)=>{
this.$set(this.formInfo,item.resourceType,'');
//验证输入值为正整数;验证输入值不能小于原始配置数量
let arry=[{message: '请输入正确的数量值',trigger: 'blur',pattern: config.validate.positiveInteger}];
let obj = { //验证每个输入值大于原始配额
validator:function(rule,value,callback){
if(value){
if((Number(value)<Number(item.quotasValue))){
callback(new Error("输入值应大于现有配额"));
}
}else{
callback();
}
}, trigger: 'blur'};
arry.push(obj);
this.rules[item.resourceType] = arry;
})
5、接下来在模板里直接使用rules就可以了。
<el-form :model="formInfo" :rules="rules" ref="formInfo" label-width="200px">
...
...
</el-form>
需要注意的地方
向formInfo里添加新属性时候,如果formInfo[item.resourceType]这样是不能进行双向绑定的,即页面上输入框无法输入。因此需要 this.$set(this.formInfo,item.resourceType,’’)。
更多推荐
所有评论(0)