### 关于 `
vue-element
-plus
-admin` 中
表单 (
Form) 的使用
#### 创建基础
表单组件
为了创建一个简单的
表单，在 `
vue-element
-plus
-admin` 项目中可以利用 Element Plus 提供的 `<el
-form>` 组件来构建。下面是一个基本的例子：
```html
<template>
<div class="app
-container">
<!
-- Form -->
<el
-form :model="rule
Form" status
-icon :rules="rules" ref="rule
FormRef" label
-width="100px" class="demo
-rule
Form">
<el
-form-item label="用户名" prop="username">
<el
-input v
-model="rule
Form.username"></el
-input>
</el
-form-item>
<el
-form-item label="密码" prop="password">
<el
-input type="password" v
-model="rule
Form.password" autocomplete="off"></el
-input>
</el
-form-item>
<el
-form-item>
<el
-button type="primary" @click="submit
Form(rule
FormRef)">提交</el
-button>
<el
-button @click="reset
Form(rule
FormRef)">重置</el
-button>
</el
-form-item>
</el
-form>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from '
vue'
import type { El
Form } from 'element
-plus'
interface Rule
Form {
username: string;
password: string;
}
const rule
FormRef = ref<InstanceType<typeof El
Form>>()
const rule
Form = reactive<Rule
Form>({
username: '',
password: ''
})
// 验证规则定义
const rules = reactive({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'change' }
]
})
const submit
Form = async (
formEl: InstanceType<typeof El
Form> | undefined) => {
if (!
formEl) return
await
formEl
.validate((valid, fields) => {
if (valid) {
console
.log('submit!')
} else {
console
.log('error submit!', fields)
}
})
}
const reset
Form = (
formEl: InstanceType<typeof El
Form> | undefined) => {
if (!
formEl) return
formEl
.resetFields()
}
</script>
```
此代码片段展示了如何设置带有验证功能的基础
表单[^1]。
####
表单校验与事件
处理
上述例子中的 `submit
Form()` 方法用于触发
表单验证逻辑；如果所有字段都有效，则执行相应的业务操作，比如向服务器发送请求
保存数据。而 `reset
Form()` 可以用来清除当前填写的内容并将状态恢复默认值。
#### 动态加载远程选项列表
对于某些场景下可能需要动态获取的数据项（如城市选择器），可以通过异步方式从后端API拉取最新
信息填充到
表单项内。这通常涉及到 Axios 或 Fetch API 来发起 HTTP 请求，并将返回的结果绑定给特定控件作为可选值显示出来。
扫一扫
2402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
