首先，确保你已经安装了 Element-React，并在你的项目中引入了相应的样式和组件。可以通过 npm 或 yarn 安装：
npm install element-react
# 或
yarn add element-react
然后，在你的 Vue 组件中，可以这样使用 Form 组件：
<template>
<div>
<h3>Element-React Form 表单</h3>
<el-form :model="formData" :rules="formRules" ref="form" label-position="top" label-width="80px">
<el-form-item label="Name" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="Email" prop="email">
<el-input v-model="formData.email"></el-input>
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model="formData.age" type="number"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">Submit</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-react';
export default {
components: {
ElForm,
ElFormItem,
ElInput,
ElButton,
},
data() {
return {
formData: {
name: '',
email: '',
age: null,
},
formRules: {
name: [
{ required: true, message: 'Please enter your name', trigger: 'blur' },
{ min: 3, max: 20, message: 'Length should be between 3 and 20', trigger: 'blur' },
],
email: [
{ required: true, message: 'Please enter your email', trigger: 'blur' },
{ type: 'email', message: 'Please enter a valid email address', trigger: ['blur', 'change'] },
],
age: [
{ required: true, message: 'Please enter your age', trigger: 'blur' },
{ type: 'number', message: 'Please enter a valid number', trigger: 'change' },
],
},
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// Form is valid, you can submit the data or perform other actions
console.log('Form is valid, data submitted:', this.formData);
} else {
// Form is invalid, display error messages
console.log('Form is invalid');
}
});
},
},
};
</script>
在这个例子中，我们引入了 Element-React 的 ElForm、ElFormItem、ElInput 和 ElButton 组件，并在模板中使用它们。通过调整 formData、formRules 数据属性，你可以自定义表单的字段和验证规则。
在方法中，我们使用 $refs.form.validate 方法来触发表单验证。如果表单验证通过，你可以在 submitForm 方法中执行提交数据或其他操作。如果验证不通过，Element-React 会自动显示相关的错误信息。
可以根据 Element-React 的文档和组件属性来进一步自定义表单的外观和行为。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5613/Element-React