第7章 若依框架的表单构建
1. 功能说明
在若依框架中，表单构建功能可以通过菜单中的"系统工具" -> "表单构建"访问。该功能提供了一系列优势：
- 可视化操作与配置：无需编写繁琐的代码，通过拖拽、配置即可快速构建表单。
- 高度自定义：支持多种字段类型（如文本框、下拉框等），并允许自定义样式和布局。
- 数据校验与验证：内置了强大的数据校验机制，确保数据准确性和完整性。
- 多类型导出：可根据需要选择生成页面组件或弹窗组件。
2. 基本信息组件示例
2.1 字段描述
| 字段名 | 所用组件 |
|---|---|
| 老人姓名 | 单行文本 |
| 身份证号 | 单行文本 |
| 出生日期 | 日期选择 |
| 年龄 | 单行文本 |
| 性别 | 单选框组 |
| 联系方式 | 单行文本 |
| 家庭住址 | 多行文本 |
| 一寸照片 | 上传 |
| 身份证人像面 | 上传 |
| 身份证国徽面 | 上传 |
2.3 进行表单构建
1)每两个字段都用一个行容器包住两个字段的组件。
2)选择生成页面组件并命名为index.vue。
2.2 代码实现
以下是使用若依框架表单构建工具生成的基本信息表单的简化版Vue代码示例：
html
<template>
<div>
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="100px">
<!-- 使用el-row和el-col进行布局 -->
<el-row gutter="15">
<el-col :span="12">
<el-form-item label="老人姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入老人姓名"></el-input>
</el-form-item>
</el-col>
<!-- 其他输入项类似 -->
</el-row>
<!-- 提交按钮 -->
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
// 数据模型和规则
const formData = reactive({
name: undefined,
// 其他字段...
})
const rules = reactive({
name: [{ required: true, message: '请输入老人姓名', trigger: 'blur' }],
// 其他规则...
})
</script>3. 注意事项
- 调整样式 ：根据实际需求调整表单项的宽度和布局，比如使用
el-col来控制每行显示的列数。 - 数据校验：确保每个必填项都有相应的校验规则，以提高数据质量。
- 文件上传：对于上传类型的字段，需设置合适的上传路径和大小限制，并提供友好的错误提示。