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

2026-02-05 05:29:04作者：平淮齐Percy

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

表单设计器概述

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

核心功能

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

快速上手

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

基础配置步骤

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

表单配置详解

字段配置界面

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

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

表单类型选择

表单设计器支持多种表单控件类型，通过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;
  });
};