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":"1997566a-b5ed-457c-a59c-e19104f03c9c",
    "url":"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Z+65pys5oyH5oyl5omAIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiDQoJIHk9IjBweCIgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHdpZHRoPScyNScgaGVpZ2h0PScyNSc+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojRkYwMDAwO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8bGluZSBjbGFzcz0ic3QwIiB4MT0iNy41IiB5MT0iMTQuNSIgeDI9IjcuNSIgeTI9IjI4LjUiLz4NCjxyZWN0IHg9IjcuNSIgeT0iMy41IiBjbGFzcz0ic3QwIiB3aWR0aD0iMTkiIGhlaWdodD0iMTEiLz4NCjwvc3ZnPg0K"
}

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值