Vue中Form报表单v-model动态生成

后台数据结构：

var PropertiesArray =  [
    {
      "propertyId": 1,
      "propertyName": "url",
      "description": null,
      "serial": null,
      "dataSourceTypeId": "db"
    },
    {
      "propertyId": 2,
      "propertyName": "driver",
      "description": null,
      "serial": null,
      "dataSourceTypeId": "db"
    },
    {
      "propertyId": 3,
      "propertyName": "user_name",
      "description": null,
      "serial": null,
      "dataSourceTypeId": "db"
    },
    {
      "propertyId": 4,
      "propertyName": "password",
      "description": null,
      "serial": null,
      "dataSourceTypeId": "db"
    }
  ]

data里面form表单数据：

 export default {
    data(){
        return {
            form: {
                    dataSourceName: '',   
                    description: '', 
                    typeId: 'db',  
                    createId: '',  
                }
        }
    }
 }

具体代码逻辑：

1、在获取后台接口后将动态生成的Form表单的key与data里面的form数据进行合并

//  后台接口请求（获得form包含的属性定义） 
dataSourceTypeProperties({dataSourceTypeId:dataSourceTypeId}).then(res=>{
     if (res.success == 1) {
            this.PropertiesArray = res.value;  // 赋值
            // 重要环节步骤1
            for(var i=0;i<this.PropertiesArray.length;i++){
                let items = this.PropertiesArray[i];
                this.$set(this.form,items.propertyName,'');   //往from添加当前数据源类型下对应的属性数据集合
            }
     }
})

2、循环数据PropertiesArray 形成DOM

//  DOM生成
<el-form-item v-for="(items,index) in PropertiesArray" :key="index" :label="items.description+'：'" :prop="items.propertyName" >
     <el-input v-model="form[items.propertyName]" class="taskInputWid"></el-input>
</el-form-item>

完结：

    重点：<el-input v-model="form[items.propertyName]" class="taskInputWid"></el-input>