t-form-dynamic

FormDynamic 动态表单

组件介绍

动态表单组件，根据JSON配置生成表单，支持多种表单字段类型和校验规则，适用于需要根据后端配置生成表单的场景。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <t-form-dynamic 
    ref="dynamicForm"
    :options="formOptions"
    :forms="formData"
    :rules="formRules"
    direction="column"
  ></t-form-dynamic>
  <t-button type="primary" @click="handleSubmit">提交</t-button>
  <t-button @click="handleReset">重置</t-button>
</template>

<script setup>
const dynamicForm = ref(null);
const formData = ref({
  username: '',
  password: '',
  gender: '',
  hobbies: [],
  agree: false
});

const formOptions = ref([
  {
    type: 'input',
    name: 'username',
    label: '用户名',
    itemAttrs: {
      required: true
    },
    attrs: {
      placeholder: '请输入用户名',
      maxlength: 20
    }
  },
  {
    type: 'input',
    name: 'password',
    label: '密码',
    itemAttrs: {
      required: true
    },
    attrs: {
      placeholder: '请输入密码',
      type: 'password'
    }
  },
  {
    type: 'radio',
    name: 'gender',
    label: '性别',
    itemAttrs: {
      required: true
    },
    attrs: {
      mode: 'button'
    },
    list: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  },
  {
    type: 'checkbox',
    name: 'hobbies',
    label: '爱好',
    list: [
      { label: '篮球', value: 'basketball' },
      { label: '足球', value: 'football' },
      { label: '游泳', value: 'swimming' }
    ]
  },
  {
    type: 'switch',
    name: 'agree',
    label: '同意协议',
    itemAttrs: {
      required: true
    }
  }
]);

const formRules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  agree: [
    { required: true, message: '请同意协议', trigger: 'change' }
  ]
});

function handleSubmit() {
  if (dynamicForm.value.validate()) {
    console.log('表单验证通过', formData.value);
    // 提交表单数据
  }
}

function handleReset() {
  dynamicForm.value.reset();
}
</script>

Props

属性名	类型	默认值	说明	可选值
size	String	""	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	""	组件显示主题	normal, dark, light, plain
options	Array	[]	动态表单的配置	-
forms	Object	{}	绑定表单的值	-
rules	Object	{}	校验规则配置	-
showLabel	Boolean	true	是否显示header	true, false
direction	String	"row"	表单的布局的方向	row, column
rulesClass	String	""	规则样式	-
labelClass	String	""	标签样式	-
childClass	String	""	统一设置子组件样式	-
requiredAsterisk	String	"*"	必填时的提示符	-
requiredAsteriskClass	String	"mt-10"	必填提示符的样式	-
hideRequiredAsterisk	Boolean	false	隐藏必填提示符	true, false
showMessage	Boolean	true	是否显示验证信息	true, false
bottomLine	Boolean	false	是否显示底部线条	true, false

Events

事件名	说明	回调参数
click	点击时触发	-
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

Methods

方法名	说明	参数	返回值
validate	验证表单	无	Boolean
reset	重置表单	无	无

Slots

插槽名	说明
default	自定义表单字段内容，接收item和index参数