还是拿Test.vue组件来举例子，对于移动端的话，首先需要安装vant依赖，默认大家已经安装好了。
动态表单渲染由于手机端没有下拉框这个组件，而是使用Picker选择器来代替，那么就需要思考一个问题,多个picker的话怎么实现一一对应呢?该怎么处理?
form.json里面新增一个对象-城市,之前的代码还是可以复用
{ "showName": "城市", "showValue": null, "htmlElements": "下拉框", "requiredOrNot": 1, "desc":"请选择职业" }这样一来就有多个下拉框，从而来解决多个picker的问题。
Test.vue的代码
html代码区
<template> <div> <h2>测试vant动态表单</h2> <van-form @submit="submitClaim"> <template v-for="(item,index) of fieldArray"> <template v-if="item.htmlElements==='输入框'"> <van-field :maxlength="item.fieldLength" show-word-limit v-model="fieldObj[item.showName]" :name="item.showName" :label="item.showName"/> </template> <template v-if="item.htmlElements==='文本域'"> <van-field rows="2" autosize :label="item.showName" :name="item.showName" type="textarea" v-model="fieldObj[item.showName]" :maxlength="item.fieldLength" show-word-limit/> </template> <template v-if="item.htmlElements==='日历控件'"> <van-field :name="item.showName" is-link :label="item.showName" :readonly="true" v-model="fieldObj[item.showName]" /> </template> <template v-if="item.htmlElements==='复选框'"> <van-field :name="item.showName" :label="item.showName"> <template #input> <van-checkbox-group v-model="fieldObj[item.showName]" direction="horizontal"> <template v-for="(child,index) of hobbies"> <van-checkbox :name="child.value">{{child.name}}</van-checkbox> </template> </van-checkbox-group> </template> </van-field> </template> <template v-if="item.htmlElements==='单选框'"> <van-field :name="item.showName" :label="item.showName"> <template #input> <van-radio-group v-model="fieldObj[item.showName]" direction="horizontal"> <template v-for="(child,index) of sex"> <van-radio :name="child.value">{{child.name}}</van-radio> </template> </van-radio-group> </template> </van-field> </template> <template v-if="item.htmlElements==='下拉框'"> <van-field :name="item.showName" is-link :label="item.showName" :readonly="true" v-model="fieldObj[item.showName]"/> </template> </template> </van-form> </div> </template>