后台数据结构:
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>