在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()
进行表单验证。
示例
vue
<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)
vue
<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中返回