记微信小程序动态表单实现

最新推荐文章于 2025-04-08 14:53:59 发布

qiaokeli826

最新推荐文章于 2025-04-08 14:53:59 发布

阅读量4.6k

点赞数 6

分类专栏：小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/qiaokeli826/article/details/113978179

版权

本文介绍了如何在微信小程序中实现动态表单，通过与后端约定的表单模板格式，结合组件库 vant-weapp 进行组件渲染。文章讨论了数据绑定、组件状态管理和表单验证等关键步骤，最终完成表单数据提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人理解动态表单为根据后端数据需求，在前端用不同组件进行展示然后返回表单数据并提交的过程。上图：

图中项目为侧边弹窗，标题为输入框故障类型和优先级为输入框，内容为textarea，大致可以归纳为表单由输入框、文本域、选择框、侧边栏、文件上传、时间选择器等组件组成。

于是跟后端约定速成表单模板格式（以下为部分结果）：

[{
	"id": 0,
	"pid": 0,
	"sort": 0,
	"title": "创建时间",
	"name": "datetime-picker",
	"type": "datetime",
	"placeholder": "",
	"field": "create_at",
	"value": "",
	"format": "",
	"data": [],
	"action": [],
	"isRequire": false,
	"regexp": "",
	"isDisabled": false,
	"isReadonly": false,
	"isShow": false,
	"flag": "",
	"tip": "",
	"options": [],
	"group": 1
}, {
	"id": 1,
	"pid": 0,
	"sort": 1,
	"title": "所属项目",
	"name": "ep-selector",
	"type": "",
	"placeholder": "请选择项目",
	"field": "project",
	"value": {
		"id": "",
		"name": "",
		"address": ""
	},
	"format": "",
	"data": [],
	"action": {
		"type": "admin",
		"method": "admin.pm.lists",
		"params": {
			"keyword": "project_name",
			"default": {
				"project_ids": "all"
			}
		},
		"permissions_key": "add_order"
	},
	"isRequire": true,
	"regexp": "",
	"isDisabled": false,
	"isReadonly": false,
	"isShow": true,
	"flag": "",
	"tip": "请选择项目",
	"options": {
		"id": "project_id",
		"name": "project_name",
		"address": "address_detail"
	},
	"group": 1
}, {
	"id": 2,
	"pid": 0,
	"sort": 2,
	"title": "工单标题",
	"name": "input",
	"type": "input",
	"placeholder": "请输入工单标题",
	"field": "title",
	"value": "",
	"format": "",
	"data": [],
	"action": [],
	"isRequire": true,
	"regexp": "^[\\u4e00-\\u9fa5-_a-zA-Z0-9\\(\\)\\（\\）]{1,50}$",
	"isDisabled": false,
	"isReadonly": false,
	"isShow": true,
	"flag": "",
	"tip": "请输入有效工单标题",
	"options": [],
	"group": 1
}, {
	"id": 4,
	"pid": 3,
	"sort": 4,
	"title": "工单类型",
	"name": "picker",
	"type": "",
	"placeholder": "请选择工单类型",
	"field": "kind2",
	"value": "",
	"format": "",
	"data": [],
	"action": [],
	"isRequire": false,
	"regexp": "",
	"isDisabled": false,
	"isReadonly": false,
	"isShow": false,
	"flag": "level2",
	"tip

最低0.47元/天解锁文章