主要技术框架：uview-plus，vue2,uni-app
动态表单的意义
这次分享的动态表单，我认为动态的意义有一下几点：
1.灵活性和可扩展性：动态表单允许根据特定需求动态地生成表单字段，能够适应不同的用户需求和业务场景，无需事先定义固定的表单结构。
2.数据驱动的交互： 动态表单通常是基于数据驱动的，表单的结构和内容可以根据后端数据或其他前端状态进行动态调整，这种数据驱动的交互方式使得表单更加智能和灵活，能够更好地满足用户需求。
3. 简化开发和维护： 使用动态表单可以大大简化前端开发和维护工作。通过配置化的方式管理表单结构和内容，可以减少手动编写和维护大量静态表单代码的工作量，提高开发效率和代码质量。
4. 个性化定制： 动态表单允许根据用户角色、权限或其他条件定制表单内容。例如，管理员可能需要访问的表单字段与普通用户不同，动态表单可以根据用户的身份动态生成相应的表单结构，从而提供个性化的用户体验。
这里分享的表单我们模拟后端返回json数据！利用Vue.js和uView组件框架，实现了一个灵活、交互性强的数据输入界面。通过数据驱动的方式，表单可以根据不同的需求自动生成各种类型的输入框、下拉框和日期选择器，供大家参考，有问题欢迎指出！
模拟循环表单数据
mockForm: {
rulus: {},
FormData:[{isShow: true,el: 'input',required: true,name: '啤酒',code: 'a', type: 'number',placeholder: '请输入啤酒'},
{isShow: true,el: 'input',required: true,name: '花生',code: 'b',type: 'string',placeholder: '请输入花生'},
{isShow: true,el: 'input',required: true,name: '草莓',code: 'c',type: 'string',placeholder: '请输入草莓'},
{isShow: true,el: 'select',required: true,name: '西瓜',code: 'd',type: 'string',placeholder: '请选择西瓜',selectDate: [['黑美人', '麒麟凤瓜', '无籽', '黄瓤', '本地西瓜']],electShow: false, },
{isShow: true,el: 'input',required: true,name: '香蕉',code: 'e',type: 'string',placeholder: '请输入香蕉',},
{isShow: true,el: 'select',required: true,name: ' 苹果',code: 'f',type: 'string',placeholder: '请选择苹果',selectDate: [['青苹果', '红富士', '酸苹果', '黄苹果', '本地苹果']],selectShow: false},
{isShow: true,el: 'select',required: false,name: ' 哈密瓜',code: 'g',type: 'string',placeholder: '请选择哈密瓜',selectDate: [['哈密瓜', '哈密瓜', '哈密瓜', '哈密瓜', '哈密瓜']],selectShow: false},
{isShow: true,el: 'date',required: true,name: '交货时间',code: 't',type: 'string',placeholder: '请选择交货时间',}, {isShow: false,el: 'date',required: true,name: '退货时间',code: 'm',
type: 'string',placeholder: '请选择退货时间',}]
},
loading: false,
model1: {},
字段标注：
model1是form表单绑定的值
FormData是循环生成表单的数据对象
FormData中isShow控制着该表单项是否显示
el表示表单类型
required是用于表单校验的属性
name是表单的标签名称（lable）
与表单双向绑定的字段（使用 v-model 绑定）
type表示表单输入类型
placeholder是表单提示
当表单的 el 类型为 select 时，还有两个额外的字段：selectDate 表示下拉框的格式类型（采用了 uview-plus 组件框架中的格式），selectShow 是 uview-plus 组件框架中的一个参数，用于控制下拉框的显示状态。用户可以根据实际需求修改这两个字段以适配所使用的下拉框格式。
代码如下：
<u-form label-position="left" label-width="100" :model="model1" :rules="mockForm.rules" ref="uForm">
<div class="bffBox">
<div v-for="(item, index) in mockForm.FormData" :key="index">
<u-form-item v-if="item.isShow && item.el === 'input'" :label="item.name" :prop="item.code" borderBottom ref="item1" :required='item.required'>
<template v-if="item.el === 'input'">
<u-input input-align="left" width="200px" v-model="model1[item.code]" border="none" :placeholder="item.placeholder"></u-input>
</template>
</u-form-item>
<u-form-item v-else-if="item.isShow &&item.el === 'select'" :required='item.required' :label="item.name" :prop="item.code" borderBottom ref="item1">
<u--input inputAlign="left" v-model="model1[item.code]" border="none" :placeholder="item.placeholder"></u--input>
<template #right>
<u-icon name="arrow-right" @click="item.selectShow = true"></u-icon>
</template>
<template v-if="item.el === 'select'">
<u-picker :columns="item.selectDate" :show="item.selectShow"
@confirm="selectConfirm($event, item, item.code)" @cancel="item.selectShow = false">
</u-picker>
</template>
</u-form-item>
<u-form-item v-else-if="item.isShow &&item.el === 'date'" :required='item.required'
:label="item.name" :prop="item.code" ref="item1">
<picker mode="date" @change="outDateChange($event, item, item.code)">
<div style="display: flex">
<view class="flex" :style="{
color: model1[item.code] ? '' : '#c0c4cc',fontSize: '15px', }">{{ model1[item.code]|| item.placeholder }}</view>
<u-icon class="flex tRight" name="arrow-right" size="16"></u-icon>
</div>
</picker>
</u-form-item>
</div>
</div>
</u-form>
小伙伴们！这次分享在这里就结束咯，我这里分享了一个简单的动态表单代码，只有输入框、下拉框和时间选择器。你们可以根据自己的需求添加更多有趣的表单元素哦！而且，我还会在后期更新一个PC端的Element UI动态表单版本。一起来探索吧！点赞收藏叭！小伙伴们也可以把这些代码封装成组件，方便大家更好地使用！
