1. 基本表单:
<Form>
<Form.Item label="用户名">
<Input />
</Form.Item>
<Form.Item label="密码">
<Input type="password" />
</Form.Item>
<Form.Item>
<Button type="primary">提交</Button>
</Form.Item>
</Form>
2. 表单验证:
使用 rules 属性进行表单验证，例如：
<Form>
<Form.Item label="邮箱" prop="email">
<Input />
</Form.Item>
<Form.Item>
<Button type="primary" nativeType="submit">提交</Button>
</Form.Item>
</Form>
3. 表单布局:
使用 label-position 属性设置表单项标签位置，例如：
<Form label-position="top">
<Form.Item label="用户名">
<Input />
</Form.Item>
<Form.Item label="密码">
<Input type="password" />
</Form.Item>
<Form.Item>
<Button type="primary">提交</Button>
</Form.Item>
</Form>
4. 表单项状态:
使用 status 属性设置表单项的状态，例如：
<Form>
<Form.Item label="用户名" prop="username" status="error">
<Input />
<div className="el-form-item__error">用户名不能为空</div>
</Form.Item>
<Form.Item label="密码" prop="password">
<Input type="password" />
</Form.Item>
<Form.Item>
<Button type="primary" nativeType="submit">提交</Button>
</Form.Item>
</Form>
5. 动态表单项:
根据数据动态生成表单项，例如：
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' }
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' }
]
}
};
},
methods: {
handleSubmit() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过，执行提交操作
} else {
// 表单验证失败
}
});
}
},
template: `
<Form :model="form" :rules="rules" ref="form">
<Form.Item label="用户名" prop="username">
<Input v-model="form.username" />
</Form.Item>
<Form.Item label="密码" prop="password">
<Input type="password" v-model="form.password" />
</Form.Item>
<Form.Item>
<Button type="primary" @click="handleSubmit">提交</Button>
</Form.Item>
</Form>
`
以上是一些常见的 Element-React Form 组件的用法示例。你可以根据具体需求在项目中使用它们，并根据 Element-React 文档进行详细配置和使用说明。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5597/Element-React