FormDynamic 动态表单

FormDynamic 组件是一个用于生成和管理表单字段的动态表单组件，支持多种配置，包括表单字段选项、表单值、校验规则等。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="动态表单" class="p.30-ov">
		<t-card class="mb.30" title="DynamicForm 动态表单" sub-title="后端配置json,前端动态展示表单填写,适用于政务办件后台制作表格的展示"></t-card>
		<t-form-dynamic ref="ruleForm" v-if="list.length>0" :options="childs" :forms="formdata" :rules="rules"
			:disabled="disabled" class="tdb-tdr-ov-tdp" child-class="ptb.20"></t-form-dynamic>
		<t-button class="mb.30" type="primary" @click="submitForm">提交</t-button>
		<t-button class="mb.30" type="s" @click="resetForm">重置</t-button>
		<t-button type="error" @click="disabled=!disabled">{{disabled?'取消禁用':'禁用表单'}}</t-button>
	</t-page>
</template>

<script setup>
	import { isPhone, TuipickerDateRange } from '@/uni_modules/tui-plus'
	import { TuiApi } from '@/api/uriApi.uts'
	const disabled = ref(false)
	const ruleForm = ref<ComponentPublicInstance | null>(null)
	const dateRange = {
		year: [2020, 2028]
	} as TuipickerDateRange
	const list = ref<UTSJSONObject[]>([])
	const childs = ref<UTSJSONObject[]>([
		{
			title: "下拉选择",
			name: "selectvalue",
			type: "select",
			list: [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶',
				disabled: true
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}],
			attrs: {}
		},
		{
			title: '手机号',
			type: 'input',
			name: 'phone',
			attrs: {
				effect: 'plain',
				border: false,
				class: 'ff-sta.r-pr.0-mr.30',
				mode: 'number',
				maxlength: 11,
				placeholder: "请输入手机号"
			}
		}, {
			title: '性别 ',
			type: 'radio',
			name: 'gender',
			attrs: {},
			list: [
				{
					value: '1',
					label: '男'
				},
				{
					value: '2',
					label: '女'
				}, {
					value: '3',
					label: '保密'
				}
			]
		}, {
			title: '爱好 ',
			type: 'checkbox',
			name: 'hobby',
			list: [
				{
					value: '1',
					label: '学习'
				},
				{
					value: '2',
					label: '泡妞'
				}, {
					value: '3',
					label: '看书'
				}
			]
		},
		{
			title: "验证码",
			name: "codeinput",
			type: "code",
			attrs: {
				dot: true, dotSymbol: "*", autoFocus: true, maxlength: 4
			}
		},
		{
			title: "评分",
			name: "ratecount",
			type: "rate",
			attrs: { class: 's.65', type: 'p' },
		},
		{
			title: "开关",
			name: "switchs",
			type: "switch",
			attrs: { activeIcon: 'volume-up', inactiveIcon: 'volume-off' },
		},
		{
			title: "上传",
			name: "uploads",
			type: "upload",
			attrs: {},
		},
		{
			title: "步进器",
			name: "numberbox",
			type: "stepper",
			attrs: { min: 3, max: 99 }
		},
		{
			title: "滑块",
			name: "sliderval",
			type: "slider",
			attrs: { class: 'ff-h.150', direction: 'horizontal', min: 0, max: 500, blockSize: '60', disabled: false, showValue: true, trackSize: '20', showMode: 'after' },
		},
		{
			title: '文本',
			type: 'textarea',
			name: 'textareavalue',
			attrs: {
				class: 'ff-mtb.30-h.160',
				placeholder: "欢迎使用Tui", onInput: (e : UniInputEvent) => {
					uni.showToast({
						title: e.detail.value
					})
				}
			}
		},
		{
			title: "颜色设置",
			name: "colorvalue",
			type: "color",
			attrs: {}
		},
		{
			title: "时间选择",
			type: 'date',
			name: "datevalue",
			attrs: {
				class: 'ff',
				mode: ['year', 'month', 'day'],
				range: dateRange
			}
		},
	])
	const formdata = ref<UTSJSONObject>({
		phone: '15329438335',
		gender: '2',
		hobby: ['1', '3'],
		codeinput: '1',
		ratecount: 3,
		switchs: true,
		uploads: [{ url: '/static/image/6527ae979850d.jpg' }],
		numberbox: 15,
		selectvalue: ['选项1'],
		sliderval: [0, 105, 500],
		textareavalue: '文本域内容',
		colorvalue: '#2979ff',
		datevalue: '',
		cityvalue: ['130000', '130500', '130502'] as string[]
	})
	const rules = ref<UTSJSONObject>({
		phone: [
			{ type: 'required', message: '手机号不能为空' },
			{ type: 'length', min: 11, max: 11, message: '手机号长度只能为11位' },
			{
				type: 'function',
				fun: (e : any) : boolean => {
					return isPhone(`${e}`)
				},
				message: '手机号正则验证失败'
			}
		]
	})
	function submitForm() {
		const validate : boolean = (ruleForm.value!).$callMethod('validate') as boolean
		if (validate) {
			uni.showModal({
				title: '数据提交成功'
			})
			disabled.value = !disabled.value
		} else {
			uni.showModal({
				title: '数据校验失败'
			})
		}
	}
	function resetForm() {
		(ruleForm.value!).$callMethod('reset')
	}

	onLoad((_) => {
		const datalist = uni.getStorageSync('citydata')
		if (`${datalist}` == '') {
			TuiApi('citydata').then(res => {
				let arr = res.getArray('data') as UTSJSONObject[]
				childs.value.push({
					title: "地区选择",
					type: 'city',
					name: 'cityvalue',
					attrs: {
						list: arr
					}
				} as UTSJSONObject)
				uni.setStorageSync('citydata', arr)
				list.value = arr
			})
		} else {
			childs.value.push({
				title: "地区选择",
				type: 'city',
				name: 'cityvalue',
				attrs: {
					list: datalist
				}
			} as UTSJSONObject)
			list.value = datalist as UTSJSONObject[]
		}
	})
</script>

Props

名称	描述	类型	默认值
options	表单字段选项数组	UTSJSONObject[]	[]
forms	表单值对象	UTSJSONObject	{}
rules	表单校验规则对象	UTSJSONObject	{}
disabled	是否禁用表单	Boolean	false

Events

事件名	描述	回调参数
-	-	-

Slots

名称	描述
-	-

Methods

方法名	描述	参数
validate	进行表单校验	-
reset	重置表单	-