el-form 表单组件

el-form 是 Element Plus 提供的一个表单组件，用于创建和管理表单。它提供了丰富的功能，包括表单验证、表单重置、表单数据绑定等。下面是对 el-form 组件的详细解读：

基本用法

<el-form :model="form" :rules="rules" ref="formRef">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username" />
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="form.password" type="password" />
  </el-form-item>
  <el-button type="primary" @click="submitForm">提交</el-button>
  <el-button @click="resetForm">重置</el-button>
</el-form>

主要属性：

属性全部采用v-bind进行单向绑定，动态绑定 HTML 属性，即：数据—>组件属性，是单向绑定。

el-form 的 model 属性是一个普通的属性，用于传递表单数据对象，而不是一个表单输入元素，本身不存在输入能力，所以单向绑定即可。

v-model 用于实现表单输入元素的双向数据绑定。v-model 通常用于表单输入元素，而不是用于组件的属性绑定。

属性名	描述	类型	默认值
model	表单数据对象，用于绑定表单字段	Object	-
rules	表单验证规则	Object	-
label-width	表单域标签的宽度	String	-
label-position	表单域标签的位置，可选值为 'left'、'right'、'top'	String	'right'
inline	是否将表单内的表单项排列在一行	Boolean	false

子组件 el-form-item

el-form-item 是 el-form 的子组件，用于包裹表单输入组件，并可以添加标签和验证规则。

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username" />
</el-form-item>

属性名	描述	类型	默认值
label	表单域标签	String	-
prop	对应表单域的字段，在验证规则中使用	String	-

表单验证

el-form 支持表单验证，通过 rules 属性定义验证规则。

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度在 6 到 18 个字符', trigger: 'blur' }
  ]
}

验证规则	描述
required	是否必填
message	验证失败时的提示信息
trigger	触发验证的事件，可选值为 'blur'、'change'
min	最小长度
max	最大长度
pattern	正则表达式验证

表单操作

提交表单

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 验证通过，提交表单
      console.log('表单数据:', form)
    } else {
      console.log('验证失败')
      return false
    }
  })
}

重置表单

const resetForm = () => {
  formRef.value.resetFields()
}

示例代码

<template>
  <el-form
    :model="form"
    :rules="rules"
    ref="formRef"
    label-width="100px"
    label-position="right"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)

const form = reactive({
  username: '',
  password: ''
})

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度在 6 到 18 个字符', trigger: 'blur' }
  ]
})

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功')
      console.log('表单数据:', form)
    } else {
      ElMessage.error('验证失败')
      return false
    }
  })
}

const resetForm = () => {
  formRef.value.resetFields()
}
</script>

总结

el-form 组件是 Element Plus 中一个功能强大的表单组件，支持表单数据绑定、验证、重置等操作。通过合理的配置和使用，可以快速构建出功能完善的表单界面，提升开发效率和用户体验。