vue3-element-admin表单设计器：可视化表单配置工具

你还在为手动编写表单代码而烦恼吗？vue3-element-admin提供的表单设计器工具可以通过可视化配置快速生成表单，无需编写大量重复代码。本文将详细介绍如何使用这一工具，让你轻松掌握表单配置的全流程。

表单设计器概述

vue3-element-admin的表单设计器是一个基于可视化界面的表单配置工具，它集成在代码生成模块中，位于src/views/codegen/index.vue。该工具允许用户通过简单的配置来生成复杂的表单，支持多种表单类型和自定义选项。

核心功能

• 可视化表单配置界面
• 支持多种表单控件类型
• 字段权限控制
• 表单验证规则设置
• 数据字典集成

快速上手

要使用表单设计器，首先需要进入代码生成模块。在系统菜单中找到"代码生成"选项，点击进入后会显示数据库表列表。选择需要生成表单的表，点击"生成代码"按钮即可打开表单设计器。

基础配置步骤

1. 在基础配置页面填写必要信息，包括业务名、包名、模块名等
2. 点击"下一步，字段配置"进入表单设计界面
3. 在字段配置页面设置各字段的表单属性
4. 完成配置后点击"下一步，确认生成"
5. 预览生成的表单代码并下载或写入本地

表单配置详解

字段配置界面

字段配置页面是表单设计的核心，在这里可以对每个字段的表单属性进行详细设置。界面主要分为批量操作区和字段配置表格两部分。

批量操作区提供了对查询、列表和表单字段的快速选择功能，可以一键设置所有字段的显示状态。

表单类型选择

表单设计器支持多种表单控件类型，通过FormTypeEnum枚举定义，位于src/enums/codegen/form-enum.ts。主要包括：

• 输入框(INPUT)
• 文本域(TEXTAREA)
• 下拉选择(SELECT)
• 单选框(RADIO)
• 复选框(CHECKBOX)
• 日期选择(DATE)
• 日期时间选择(DATETIME)

在字段配置表格中，点击"表单类型"列的下拉框即可选择相应的表单控件：

<el-table-column label="表单类型" min-width="120">
  <template #default="scope">
    <el-select
      v-if="scope.row.isShowInQuery === 1 || scope.row.isShowInForm === 1"
      v-model="scope.row.formType"
      placeholder="请选择"
    >
      <el-option
        v-for="(item, key) in formTypeOptions"
        :key="key"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span v-else>-</span>
  </template>
</el-table-column>

字典类型集成

对于下拉选择类型的表单控件，可以关联系统中的数据字典。在选择表单类型为"SELECT"后，"字典类型"列会显示可选的字典列表：

<el-table-column label="字典类型" min-width="100">
  <template #default="scope">
    <el-select
      v-if="scope.row.formType === FormTypeEnum.SELECT.value"
      v-model="scope.row.dictType"
      placeholder="请选择"
      clearable
    >
      <el-option
        v-for="item in dictOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span v-else>-</span>
  </template>
</el-table-column>

系统字典管理功能位于src/views/system/dict/index.vue，可以在那里维护各种字典数据。

高级功能

表单验证设置

表单设计器支持设置字段的必填属性，通过"必填"列的复选框进行配置。当字段被设置为必填时，生成的表单会自动添加验证规则：

<el-table-column label="必填" width="70">
  <template #default="scope">
    <el-checkbox
      v-if="scope.row.isShowInForm == 1"
      v-model="scope.row.isRequired"
      :true-value="1"
      :false-value="0"
    />
    <span v-else>-</span>
  </template>
</el-table-column>

字段排序

表单设计器支持通过拖拽调整字段顺序，排序结果会影响生成表单的字段展示顺序：

const setNodeSort = (oldIndex: number, newIndex: number) => {
  // 使用arr复制一份表格数组数据
  const arr = Object.assign([], genConfigFormData.value.fieldConfigs);
  const currentRow = arr.splice(oldIndex, 1)[0];
  arr.splice(newIndex, 0, currentRow);
  arr.forEach((item: FieldConfig, index) => {
    item.fieldSort = index + 1;
  });
  genConfigFormData.value.fieldConfigs = [];
  nextTick(async () => {
    genConfigFormData.value.fieldConfigs = arr;
  });
};

表单预览

完成表单配置后，可以在预览页面查看生成的表单代码。选择"前端"预览范围和"vue"类型，可以看到完整的表单组件代码：

实际应用示例

用户管理表单配置

以用户管理模块为例，使用表单设计器配置用户表单的步骤如下：

1. 在代码生成页面选择"sys_user"表
2. 基础配置中设置业务名为"用户"，模块名为"system"
3. 字段配置页面设置各字段属性：
   • 用户名：输入框，必填
   • 性别：下拉选择，关联"gender"字典
   • 邮箱：输入框，邮箱验证
   • 状态：单选框，启用/禁用
4. 生成代码并下载

配置完成后，生成的表单组件位于src/views/system/user/index.vue，表单配置数据定义在src/views/demo/curd/config目录下的相关文件中。

总结与展望

vue3-element-admin的表单设计器通过可视化配置大大简化了表单开发流程，提高了开发效率。目前该工具已经集成了大部分常用的表单功能，但仍有进一步优化的空间。

未来版本可能会增加以下功能：

• 自定义表单模板
• 表单布局拖拽
• 更丰富的表单控件
• 表单数据联动配置

通过掌握表单设计器的使用，你可以快速构建出符合业务需求的高质量表单，让开发工作更加高效和愉快。

如果你对表单设计器有任何使用问题或改进建议，欢迎在项目仓库中提交issue或PR。别忘了点赞、收藏本文，关注项目更新，获取更多实用教程！