表单 Form

对应 Arco Form，标签位置支持横向与纵向布局，校验提示使用主题错误色。 属性用法见 Element Plus 文档。

表单校验

点击 Submit 触发真实校验，修正字段后可以提交成功。

Name

Email

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const form = ref<FormInstance>()
const model = reactive({ name: '', email: '' })
const status = ref('')
const rules: FormRules = {
  name: [{ required: true, message: 'Please enter your name', trigger: 'blur' }],
  email: [{ required: true, message: 'Please enter your email', trigger: 'blur' }, { type: 'email', message: 'Please enter a valid email', trigger: 'blur' }],
}
// Invalid fields show their own error messages.
function submit() {
  form.value?.validate((valid) => { status.value = valid ? 'Form submitted' : 'Please correct the fields' })
}
</script>

<template>
  <el-form ref="form" :model="model" :rules="rules" label-width="90px" style="width: 100%; max-width: 440px">
    <el-form-item label="Name" prop="name"><el-input v-model="model.name" placeholder="Your name" /></el-form-item>
    <el-form-item label="Email" prop="email"><el-input v-model="model.email" placeholder="name@example.com" /></el-form-item>
    <el-form-item><el-button type="primary" @click="submit">Submit</el-button><el-text aria-live="polite">{{ status }}</el-text></el-form-item>
  </el-form>
</template>

顶部标签

label-position="top" 对应 Arco 的纵向表单布局。

Project

Description

<script setup lang="ts">
import { reactive } from 'vue'
const model = reactive({ project: 'Design system', description: '' })
</script>

<template>
  <el-form :model="model" label-position="top" style="width: 100%; max-width: 360px">
    <el-form-item label="Project"><el-input v-model="model.project" /></el-form-item>
    <el-form-item label="Description"><el-input v-model="model.description" type="textarea" :rows="2" /></el-form-item>
  </el-form>
</template>

与 Arco 的差异

• 必填标记使用文字星号，Arco 使用图标。