ElementUI遍历生成Form表单

<el-form ref="formAttr" :model="formAttr" label-width="80px" label-position="left" size="mini"> <template v-for="(items,key) in formAttr.Parameters" > <el-form-item :label="items.displayName" :key="items.displayName" v-if="items.usage.indexOf('init')!= -1&&items.displayName=='名称'"> <el-input v-model="items.value"></el-input> </el-form-item> <el-form-item :label="items.displayName" :key="items.displayName" v-if="items.usage.indexOf('init')!= -1&&items.displayName=='所属阵营'"> <el-select v-model="items.value" placeholder="请选择所属阵营" @change="handlerChange($event)"> <el-option v-for="(obj,key) in entityData" :key="key" :value="obj.objectHandle" :label="obj.classification" >{ 
  {obj.classification}}</el-option> </el-select> </el-form-item> <el-form-item :label="items.displayName" :key="items.displayName" v-if="items.usage.indexOf('init')!= -1&&items.displayName=='ID'" > <el-input-number v-model="items.value" controls-position="right" disabled></el-input-number> </el-form-item> <!-- 无init的经纬高 --> <el-form-item :label="items.displayName" :key="items.displayName" v-if="items.usage.indexOf('init')== -1&&(items.displayName=='经度'||items.displayName=='纬度'||items.displayName=='高度')"> <el-input-number v-model="items.value" controls-position="right" ></el-input-number> </el-form-item> <el-form-item :label="items.displayName" :key="items.displayName" v-if="items.usage.indexOf('init')!= -1&&items.displayName=='epoch'"> <el-date-picker v-model="items.value" type="datetime" placeholder="选择日期时间"></el-date-picker> </el-form-item> <el-form-item :label="items.displayName" :key="items.displayName" v-if="items.usage.indexOf('init')!= -1&&items.displayName.indexOf('uuid')== -1&&items.displayName!=='名称'&&items.displayName!=='所属阵营'&&items.displayName!=='ID'&&items.displayName!=='epoch'"> <el-input-number v-model="items.value" controls-position="right" ></el-input-number> </el-form-item> </template> <el-form-item label="监听模型" > <el-cascader v-model="entityArr" ref="cascader" :emitPath="false" :options="entityJson" :show-all-levels="false" :props="{ expandTrigger: 'hover',value: 'id', label: 'name',multiple:true,}" > </el-cascader> </el-form-item> </el-form>

表单数据

{ "Parameters":[ { "displayName":"名称", "name":"CS_EntityName", "type":"string", "usage":"init,output", "value":"基本指挥所1000" }, { "displayName":"所属阵营", "name":"CS_ForceSide", "type":"uint16_t", "usage":"init,output,input", "value":"1" }, { "displayName":"ID", "name":"id", "type":"uint64_t", "usage":"init,output", "value":"1000" }, { "displayName":"位置", "name":"bsPos", "type":"UDPosition", "usage":"output", "value":"" }, { "displayName":"导弹信息", "name":"bsMissiles", "type":"vector<UDBasicInfo>", "usage":"input", "value":"" }, { "displayName":"模型名称", "name":"bsModelUUID", "type":"string", "usage":"fake,output", "value":"" }, { "displayName":"经度", "name":"longitude", "type":"double", "usage":"init,output", "value":"-133.72" }, { "displayName":"纬度", "name":"latitude", "type":"double", "usage":"init,output", "value":"57.01" }, { "displayName":"高度", "name":"altitude", "type":"double", "usage":"init,output", "value":"0.00" }, { "displayName":"翻滚角", "name":"roll", "type":"double", "usage":"fake,output", "value":"0.0" }, { "displayName":"俯仰角", "name":"pitch", "type":"double", "usage":"fake,output", "value":"0.0" }, { "displayName":"偏航角", "name":"yaw", "type":"double", "usage":"fake,output", "value":"0.0" } ], "classification":"/红方", "id":1000, "modelUUID":"a-b5ed-457c-a59c-e19104f03c9c", "url":"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Z+65pys5oyH5oyl5omAIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiDQoJIHk9IjBweCIgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHdpZHRoPScyNScgaGVpZ2h0PScyNSc+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojRkYwMDAwO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8bGluZSBjbGFzcz0ic3QwIiB4MT0iNy41IiB5MT0iMTQuNSIgeDI9IjcuNSIgeTI9IjI4LjUiLz4NCjxyZWN0IHg9IjcuNSIgeT0iMy41IiBjbGFzcz0ic3QwIiB3aWR0aD0iMTkiIGhlaWdodD0iMTEiLz4NCjwvc3ZnPg0K" }

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/11252.html