在Vue 2中，我们通常使用Element UI的表单组件，而在Vue 3中，由于Element UI本身并未直接支持Vue 3，我们通常会使用Element Plus作为替代，它是Element UI的Vue 3版本。下面我将分别介绍Vue 2下Element UI Form和Vue 3下Element Plus Form的属性、事件和方法。
Vue 2 + Element UI Form
属性 (Attributes)
model: 一个对象，包含了表单字段的数据。rules: 一个包含了验证规则的对象。inline: 是否为行内表单模式。label-position: 表单域标签的位置，可选值为left、right、top。label-width: 表单域标签的宽度，例如'120px'。label-suffix: 标签的后缀。show-message: 是否显示校验错误信息。size: 表单尺寸，可选值为medium、small、mini。
事件 (Events)
submit: 提交表单时触发。validate: 验证表单时触发。
方法 (Methods)
- 通常不直接调用Form组件的方法，而是通过
this.$refs[formRef].validate()进行表单验证。
示例
<template><el-form :model="form" :rules="rules" ref="formRef" label-width="120px"><el-form-item label="用户名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><!-- 其他表单项 --><el-button type="primary" @click="submitForm('formRef')">提交</el-button></el-form>
</template><script>
export default {data() {return {form: {username: '',// 其他字段},rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],// 其他规则}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('提交成功!');} else {console.log('验证失败!');return false;}});}}
};
</script>
Vue 3 + Element Plus Form
属性 (Attributes)
- 与Vue 2的Element UI Form类似，但可能有所增减或调整。
- 具体的属性列表请参考Element Plus的官方文档。
事件 (Events)
- 与Vue 2的Element UI Form类似，但可能有所增减或调整。
方法 (Methods)
- Element Plus可能提供了更多的方法或修改了现有方法的行为。
- 同样，具体的方法列表请参考Element Plus的官方文档。
示例 (使用Composition API)
<template><el-form :model="form" :rules="rules" ref="formRef" label-width="120px"><el-form-item label="用户名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><!-- 其他表单项 --><el-button type="primary" @click="submitForm">提交</el-button></el-form>
</template><script>
import { ref } from 'vue';export default {setup() {const form = ref({username: '',// 其他字段});const rules = ref({username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],// 其他规则});const submitForm = () => {const formRef = ref(null); // 注意：这里通常不需要在setup中声明ref，而是在模板中直接使用ref="formRef"formRef.value.validate((valid) => {if (valid) {alert('提交成功!');} else {console.log('验证失败!');return false;}});};// 注意：在Composition API中，ref变量直接在模板中使用，不需要在setup中返回
)
