Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据，组件升级采用了 flex 布局，以替代旧版本的 float 布局。
在 Element Plus 中，el-form 是一个表单组件，用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法，使表单验证更加容易。
使用 el-form 组件，您可以将表单控件组织在一起，并对表单进行验证，以确保提交的数据符合预期的格式和要求。该组件具有以下特性：
- 支持内置的验证规则和自定义验证函数。
- 可以通过设置
model属性将表单数据绑定到表单组件上。 - 支持表单验证前和验证后的回调函数。
- 提供了一些常见的表单控件，如输入框、下拉框、单选框、复选框等。
在功能和用法上，el-form 组件在 Element Plus 和 ElementUI 中是相似的，但是在一些细节上有一些变化。
以下是 Element Plus 和 ElementUI 中 el-form 组件的一些主要变化：
- 引入方式：ElementUI 使用
Vue.use(ElementUI)的方式引入组件，而 Element Plus 使用import导入组件。例如，在 Vue 3 中使用 Element Plus，我们需要这样导入el-form组件：import { ElForm } from 'element-plus' -
样式：Element Plus 使用新的默认主题和样式，不同于 ElementUI 的默认主题和样式。您可以使用 Element Plus 提供的主题样式或自定义主题样式。
-
表单验证：在 Element Plus 中，表单验证通过
this.$refs.form.validate()方法执行。而在 ElementUI 中，表单验证通过this.$refs.form.validate((valid) => {})方法执行。这是因为在 Element Plus 中，表单验证的回调函数是一个可选参数。 -
表单控件：Element Plus 中添加了一些新的表单控件，如
TimePicker、DatePicker、TreeSelect等。而在 ElementUI 中，这些表单控件是在el-date-picker、el-time-picker、el-cascader等组件中提供的。 -
翻译：Element Plus 支持更多的语言翻译，并且可以通过自定义翻译对象来支持更多的语言。而在 ElementUI 中，只有默认的语言翻译和几个语言包可用。
总之，Element Plus 是 ElementUI 的升级版，提供了更多的表单控件和功能，同时还改进了一些细节和样式。虽然两者之间有一些变化，但是如果您已经熟悉了 ElementUI 的 el-form 组件，那么您将会很快地适应 Element Plus 的使用。
常用属性
el-form 是 Element Plus 中的表单组件，以下是 el-form 常用的属性和方法：
model：用于绑定表单数据对象，可以使用v-model绑定到表单元素。例如，<el-input v-model="formData.username"></el-input>。rules：用于设置表单验证规则。规则是一个数组，其中每个对象表示一个验证规则。例如，rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ] }。label-width：用于设置表单元素的标签宽度。label-position：用于设置表单元素标签的位置，可选值有'right'、'left'、'top'、'bottom'。inline：用于设置是否为行内表单。disabled：用于设置是否禁用表单。
常用方法
validate：用于触发表单验证，如果验证成功，执行回调函数并传递true，否则传递false。例如，formRef.value.validate((valid) => { if (valid) { // 表单验证成功 } else { // 表单验证失败 } })。resetFields：用于重置表单数据和验证状态。clearValidate：用于清除表单验证状态。validateField：用于触发指定表单元素的验证。例如，formRef.value.validateField('username', (errorMessage) => { if (errorMessage) { // 验证失败 } else { // 验证成功 } })。submit：用于提交表单数据，需要指定一个回调函数，该函数在提交成功或失败时被调用。例如，formRef.value.submit((formData) => { // 表单提交成功 }, (error) => { // 表单提交失败 })。
这些是 el-form 常用的属性和方法，当然，还有其他属性和方法可以在需要时使用。在 Element Plus 的官方文档中，您可以找到更详细的文档和示例。
下面是一个简单的 el-form 示例：
<template><el-form :model="form" :rules="rules" ref="form" label-width="100px"><el-form-item label="用户名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="form.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('form')">提交</el-button></el-form-item></el-form>
</template><script>export default {data() {return {form: {username: '',password: ''},rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('提交成功!');} else {console.log('验证失败');return false;}});}}}
</script>在这个例子中，el-form的:model属性绑定了表单数据form，:rules属性绑定了表单验证规则rules。每个需要验证的el-form-item组件都有一个prop属性，它对应rules中的一个验证规则。
当用户点击提交按钮时，submitForm方法会被触发，该方法使用this.$refs[formName].validate来触发表单的验证。如果验证通过，则可以执行提交操作；如果验证失败，则不会执行提交操作，并在控制台输出验证失败信息。
典型表单
包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
<template><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="form.date1"style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-pickerplaceholder="选择时间"v-model="form.date2"xx`style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form>
</template><script>export default {data() {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: '',},}},methods: {onSubmit() {console.log('submit!')},},}
</script>表单验证
在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。trigger:触发方式，改变再触发 change，得到焦点再失去焦点触发 blur。
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
<template><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"
><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-pickertype="date"placeholder="选择日期"v-model="ruleForm.date1"style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-pickerplaceholder="选择时间"v-model="ruleForm.date2"style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
</template><script>export default {data() {return {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: '',},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{min: 3,max: 5,message: '长度在 3 到 5 个字符',trigger: 'blur',},],region: [{ required: true, message: '请选择活动区域', trigger: 'change' },],date1: [{type: 'date',required: true,message: '请选择日期',trigger: 'change',},],date2: [{type: 'date',required: true,message: '请选择时间',trigger: 'change',},],type: [{type: 'array',required: true,message: '请至少选择一个活动性质',trigger: 'change',},],resource: [{ required: true, message: '请选择活动资源', trigger: 'change' },],desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' },],},}},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!')} else {console.log('error submit!!')return false}})},resetForm(formName) {this.$refs[formName].resetFields()},},}
</script>表单数据的定义：
ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: '',},表单数据校验规则的定义：
rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{min: 3,max: 5,message: '长度在 3 到 5 个字符',trigger: 'blur',},],region: [{ required: true, message: '请选择活动区域', trigger: 'change' },],date1: [{type: 'date',required: true,message: '请选择日期',trigger: 'change',},],date2: [{type: 'date',required: true,message: '请选择时间',trigger: 'change',},],type: [{type: 'array',required: true,message: '请至少选择一个活动性质',trigger: 'change',},],resource: [{ required: true, message: '请选择活动资源', trigger: 'change' },],desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' },],},}},
