t-form-item

FormItem 表单项

组件介绍

表单子组件，用于包裹表单字段，提供标签、校验提示等功能，支持多种布局方向和样式定制。

平台兼容

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

基础用法

<template>
  <t-form :model="formData" :rules="formRules" ref="formRef">
    <t-form-item label="用户名" prop="username" required>
      <t-input v-model="formData.username" placeholder="请输入用户名"></t-input>
    </t-form-item>
    <t-form-item label="密码" prop="password" required>
      <t-input v-model="formData.password" type="password" placeholder="请输入密码"></t-input>
    </t-form-item>
    <t-form-item label="性别" prop="gender">
      <t-radio-group v-model="formData.gender">
        <t-radio label="male">男</t-radio>
        <t-radio label="female">女</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item label="爱好" prop="hobbies">
      <t-checkbox-group v-model="formData.hobbies">
        <t-checkbox label="basketball">篮球</t-checkbox>
        <t-checkbox label="football">足球</t-checkbox>
        <t-checkbox label="swimming">游泳</t-checkbox>
      </t-checkbox-group>
    </t-form-item>
    <t-form-item>
      <t-button type="primary" @click="handleSubmit">提交</t-button>
      <t-button @click="handleReset">重置</t-button>
    </t-form-item>
  </t-form>
</template>

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

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' }
  ]
});

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

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

Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
headerClass	String	""	标题盒子的样式	-
showLabel	Boolean	true	是否显示标题	true, false
direction	String	""	布局方向	column, row
prop	String	""	表单校验绑定的属性名	-
label	String	""	字段显示文本	-
required	Boolean	false	是否必填	true, false
showMessage	Boolean	true	是否显示表单验证规则消息提示	true, false
labelClass	String	""	字段文本的样式	-
rulesClass	String	""	验证规则的样式	-
requiredAsterisk	String	""	必填提示文本	-
requiredAsteriskClass	String	""	必填提示文本的样式	-
hideRequiredAsterisk	Boolean	false	是否隐藏必填提示文本	true, false
bottomLine	Boolean	false	是否显示底部线条	true, false

Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

Slots

插槽名	说明
default	表单字段内容插槽