vue实现多控件动态 表单

1，html

<!-- 表单开始 -->
              <div class="form_div">
                <el-form ref="form" :model="form" label-width="100px">
                  <div v-for="(item,index) in jsondata" :key="index">
                  <div class="form_title"><span>|</span> {{item.title}}</div>
                  <div v-for="(itemcontent,index2) in item.content" :key="index2">
                  <el-form-item  :label="itemcontent.listtitle" v-if="itemcontent.type=='checkbox'" style="width:100%; display: inline-block">
                    <!-- 这里是多选 -->
                    <el-checkbox-group v-model="itemcontent.values">
                      <el-checkbox v-for="(itemlist,index3) in itemcontent.list" :key="index3" :label="itemlist.value">{{itemlist.name}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                    <!-- 这里是输入框 -->
                    <el-col :span="12" v-if="itemcontent.type=='input'">
                      <el-form-item :label="itemcontent.listtitle">
                        <el-input v-model="itemcontent.value"></el-input
                        ><span class="unit">{{itemcontent.unit}}</span>
                      </el-form-item>
                    </el-col>
                    <!-- 这里是radio -->
                    <el-form-item  :label="itemcontent.listtitle" v-if="itemcontent.type=='radio'" style="width:100%; display: inline-block">
                      <el-radio-group v-model="itemcontent.value">
                        <el-radio  v-for="itemlist in itemcontent.list" :key="itemlist.value" :label="itemlist.value" >{{itemlist.name}}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <!-- 这里是下拉框 -->
                    <el-col :span="12" v-if="itemcontent.type=='select'">
                    <el-form-item :label="itemcontent.listtitle" >
                    <el-select v-model="itemcontent.value">
                      <el-option
                         v-for="itemlist in itemcontent.list" :key="itemlist.value" :value="itemlist.value" :label="itemlist.name">
                      </el-option>
                    </el-select>
                    </el-form-item>
                    </el-col>
                  <!-- </el-row> -->
                   </div>
                 </div>
                 <!--  -->
                </el-form>
              </div>
              <!-- 表单结束 -->

2,data

 jsondata:[{
    "title": "体格检查",
    "content": [{
        "listtitle": "体温",
        "value": "",
        "type": "input",
        "unit": "℃"
    }, {
        "listtitle": "脉搏",
        "value": "",
        "type": "input",
        "unit": "次/分"
    }, {
        "listtitle": "呼吸",
        "value": "111",
        "type": "input",
        "unit": "次/分"
    }, {
        "listtitle": "血压",
        "value": "",
        "type": "input",
        "unit": "mmhg"
    }]
}, {
    "title": "治疗前评估",
    "content": [{
        "listtitle": "意识",
        "list": [{
            "value": "1061",
            "name": "清醒"
        }, {
            "value": "1062",
            "name": "嗜睡"
        }, {
            "value": "1063",
            "name": "昏迷"
        }, {
            "value": "1064",
            "name": "模糊"
        }, {
            "value": "1065",
            "name": "谵妄"
        }],
        "values": ["1061", "1062", "1063", "1064", "1065"],
        "type": "checkbox"
    }, {
        "listtitle": "活动性出血",
        "list": [{
            "value": "1071",
            "name": "无"
        }, {
            "value": "1072",
            "name": "穿刺性渗血"
        }, {
            "value": "1073",
            "name": "牙龈出血"
        }, {
            "value": "1074",
            "name": "消化道出血"
        }, {
            "value": "1075",
            "name": "女性月经"
        }, {
            "value": "1076",
            "name": "其他"
        }],
        "values": [],
        "type": "checkbox"
    }, {
        "listtitle": "胃管置管口皮肤情况",
        "list": [{
            "value": "1081",
            "name": "红"
        }, {
            "value": "1082",
            "name": "肿"
        }, {
            "value": "1083",
            "name": "分泌物"
        }, {
            "value": "1084",
            "name": "无异常"
        }, {
            "value": "1085",
            "name": "无胃管"
        }],
        "values": [],
        "type": "checkbox"
    }, {
        "listtitle": "尿管置管口皮肤情况",
        "list": [{
            "value": "1091",
            "name": "红"
        }, {
            "value": "1092",
            "name": "肿"
        }, {
            "value": "1093",
            "name": "分泌物"
        }, {
            "value": "1094",
            "name": "无异常"
        }, {
            "value": "1095",
            "name": "无尿管"
        }],
        "values": [],
        "type": "checkbox"
    }, {
        "listtitle": "引流管置管口皮肤情况",
        "list": [{
            "value": "1101",
            "name": "红"
        }, {
            "value": "1102",
            "name": "肿"
        }, {
            "value": "1103",
            "name": "分泌物"
        }, {
            "value": "1104",
            "name": "无异常"
        }, {
            "value": "1105",
            "name": "无引流管"
        }],
        "values": [],
        "type": "checkbox"
    }, {
        "listtitle": "气管切开情况",
        "list": [{
            "value": "1111",
            "name": "红"
        }, {
            "value": "1112",
            "name": "肿"
        }, {
            "value": "1113",
            "name": "分泌物"
        }, {
            "value": "1114",
            "name": "无异常"
        }, {
            "value": "1115",
            "name": "无切开"
        }],
        "values": [],
        "type": "checkbox"
    }, {
        "listtitle": "体位",
        "list": [{
            "value": "1121",
            "name": "自动体位"
        }, {
            "value": "1122",
            "name": "端坐体位"
        }, {
            "value": "1123",
            "name": "半卧体位"
        }, {
            "value": "1124",
            "name": "卧位"
        }, {
            "value": "1125",
            "name": "躁动不安"
        }, {
            "value": "1126",
            "name": "其他"
        }],
        "values": [],
        "type": "checkbox"
    }, {
        "listtitle": "配合检查",
        "list": [{
            "value": "1131",
            "name": "合作"
        }, {
            "value": "1132",
            "name": "不合作"
        }],
        "values": [],
        "type": "checkbox"
    }, {
        "listtitle": "实验性检查",
        "list": [{
            "value": "1141",
            "name": "正常"
        }, {
            "value": "1142",
            "name": "HIV"
        }, {
            "value": "1143",
            "name": "HAV"
        }, {
            "value": "1144",
            "name": "HCV"
        }, {
            "value": "1145",
            "name": "梅毒"
        }, {
            "value": "1146",
            "name": "其他"
        }],
        "values": [],
        "type": "checkbox"
    }, {
        "listtitle": "吸氧方式",
        "list": [{
            "value": "1021",
            "name": "面罩"
        }, {
            "value": "1022",
            "name": "气插"
        }, {
            "value": "1023",
            "name": "气切"
        }, {
            "value": "1024",
            "name": "头盔"
        }, {
            "value": "1025",
            "name": "一级"
        }, {
            "value": "1026",
            "name": "婴儿"
        }, {
            "value": "1027",
            "name": "单人"
        }],
        "value": "1023",
        "type": "select"
    }, {
        "listtitle": "氧舱设备",
        "list": [{
            "value": "1031",
            "name": "自助吸氧设备"
        }, {
            "value": "1032",
            "name": "辅助吸氧设备"
        }, {
            "value": "1033",
            "name": "单人舱"
        }],
        "value": "1032",
        "type": "radio"
    }]
}]