element ui动态生成表单数据与校验(后台传入数据）

　　前言

　　最近有一个需求是通过后台返回的数据，生成表单并添加校验。在做的过程中，动态表单挺好做，关键是校验。困扰了我2天，最后通过查找资料和“运气”终于解决了。解决问题关键点：vue的响应式。官方链接：https://cn.vuejs.org/v2/guide/reactivity.html

　　官方是这样说的：受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

 

        对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：

Vue.set(vm.someObject, 'b', 2)

　　您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.someObject,'b',2)

　　有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新属性不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

　　回到正题

　　原型一：单层循环生成的表单（简单，没有遇到问题）

　　1.表单

<el-form label-width="140px" :model="goodForm" size="small" style="width: 750px;">
  <el-col :key="index" :span="12" v-if="!(index%2==0)" v-for="(item,index) in goodForm.specSPUParams">
    <el-form-item :label="item.k" :prop="'specSPUParams.'+index+'.v'" :rules="[{required: true, message: item.k+'不能为空', trigger: 'blur'}]">
       <el-input v-model="item.v"></el-input>
    </el-form-item>
  </el-col>
  <el-col :key="index" :span="12" v-if="index%2==0" v-for="(item,index) in goodForm.specSPUParams">
    <el-form-item :label="item.k">
       <el-input v-model="item.v"></el-input>
    </el-form-item>
  </el-col>
12 </el-form>

　　2.数据初始化声明

data() {
   return { 
     goodForm: {
       specSPUParams: []
     }
   }
}

　　3.后台返回的数据结构

 　　

　　原型二：多层循环生成表单

 　　　　需求是：根据后台返回的数据生成一个表单，如图一；各表单输入一个，动态添加一个输入框，如图二；这里只进行了各表单的第一个输入框进行校验。

　　　　 遇到的问题：输入框输入了值，校验不能消失。

　　　　 解决方法：vue响应式的理解

 

 

　　

 

 

　　 

 

 

　　1.表单

<el-form label-width="110px" :model="goodForm.specSKUParams" ref="sssss" size="small" style="width: 700px;" class="demo-dynamic">
   <div :key="index" v-for="(array,key,index) in goodForm.specSKUParams">
      <el-form-item v-for="(item, indexA) in array" :label="key" v-if="indexA===0" :key="indexA" :prop="key+'.'+indexA+'.v'"
              :rules="[{required: true, message: key+'不能为空', trigger: 'blur'}]">
         <el-input placeholder="请输入参数值" v-model="item.v" style="width: 500px;" @change="skuChange(key,indexA)"></el-input>
         <el-button class="btnG" v-if="indexA+1!==array.length" @click.prevent="removeDomain(item,key)" icon="el-icon-delete-solid" type="text" 
　　　　　　　　　　　　style="font-size: 18px;color: #545C64;"></el-button>
      </el-form-item>
      <el-form-item v-for="(item, indexA) in array" v-if="!(indexA===0)" :key="indexA">
         <el-input placeholder="请输入参数值" v-model="item.v" style="width: 500px;" @change="skuChange(key,indexA)"></el-input>
         <el-button class="btnG" v-if="indexA+1!==array.length" @click.prevent="removeDomain(item,key)" icon="el-icon-delete-solid" type="text"
                style="font-size: 18px;color: #545C64;"></el-button>
      </el-form-item>
    </div>
</el-form>

　　2.数据初始化声明

data() {
  return {
    goodForm: {
      specSKUParams: {}
    }
　}
}

　　3.获得后台数据 (第2行的commonGet是自己封装的ajax请求；第4行是解决问题的关键点：给specSKUParams添加一个属性，这样此属性就具有响应式)

getSpecParams() {
   commonGet('item/spec/querySpecParam?cID=76').then(res => {
     res.data.data.rows.forEach(item => {
        this.$set(this.goodForm.specSKUParams,item.name,true);
        this.goodForm.specSKUParams[item.name]=[{
           v:''
        }]
     })
   })
 },

　　4.附带两个方法（动态增加输入框；动态删除输入框）

skuChange(key, index) {
  //console.log(key);
  let len = this.goodForm.specSKUParams[key].length;
  //console.log(len)
  if (index + 1 === len) { //如果操作的是最后一个输入框就再添加一个输入框
    this.goodForm.specSKUParams[key].push({
      v: ''
    });
  }
},
removeDomain(item,key){
  //console.log(item);
  //console.log(key);
  let index=this.goodForm.specSKUParams[key].indexOf(item);
  this.goodForm.specSKUParams[key].splice(index,1);
},

　　总结：学习一时爽，一直学习一直爽！