vue动态生成表单并加验证规则，input输入框无法输入

前言

开发过程中，遇到一个页面是纯表单配置页面，表单项有四五十个，于是只能想办法动态生成。

开始

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,’’)。