AiForm

将项目内表单容器能力抽离为通用组件，基于 Element Plus el-form + el-row 封装。

基础用法

名称

角色

请选择角色

• 研发
• 产品
• 运营

No data

归属地区

• 中国
• 英国

• No matching data

创建时间

2026 August

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

标签

标签1标签2标签3

头像

<template>
  <ai-form ref="formEl" :model="formInfo" :formConfig="formConfig"></ai-form>
  <el-button type="primary" @click="handleConfirm">{{ '确认' }}</el-button>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

const regionOptions = [
  {
    value: 'cn',
    label: '中国',
    children: [
      { value: 'bg', label: '北京' },
      { value: 'cq', label: '重庆' }
    ]
  },
  {
    value: 'en',
    label: '英国',
    children: [{ value: 'lo', label: '伦敦' }]
  },
]

const roleOptions = [
  { dictKey: 2, dictLabel: '研发' },
  { dictKey: 3, dictLabel: '产品' },
  { dictKey: 4, dictLabel: '运营' }
]

const tagList = [
  { dictLabel: '标签1', dictKey: 't1' },
  { dictLabel: '标签2', dictKey: 't2' },
  { dictLabel: '标签3', dictKey: 't3' },
]

const formInfo = reactive({
  name: '',
  role: '',
  region: '',
  tags: [],
  createTime: '',
  image: ''
})

const formConfig = computed(() => {
  return [
    {
      key: 'name',
      label: '名称',
      type: 'input',
      model: 'name',
      prop: 'name',
      required: true
    },
    {
      key: 'role',
      label: '角色',
      type: 'select',
      model: 'role',
      prop: 'role',
      required: true,
      dictList: roleOptions
    },
    {
      key: 'region',
      label: '归属地区',
      type: 'cascader',
      model: 'region',
      prop: 'region',
      required: true,
      dictList: regionOptions,
      dictKey: 'value',
      dictLabel: 'label'
    },
    {
      key: 'createTime',
      label: '创建时间',
      type: 'date',
      model: 'createTime',
      prop: 'createTime',
      required: true,
      dateType: 'date'
    },
    {
      key: 'tags',
      label: '标签',
      type: 'checkbox',
      model: 'tags',
      prop: 'tags',
      width: 24,
      required: true,
      dictList: tagList
    },
    {
      key: 'image',
      label: '头像',
      type: 'upload',
      model: 'image',
      prop: 'image',
      isImage: true,
      fileTypes: ['jpg', 'png', 'gif'],
      width: 24,
      required: true
    }
  ]
})

const formEl = ref()

const handleConfirm = () => {
  formEl.value.validate((res) => {
    if (res) {
      console.log(formInfo)
    }
  })
}
</script>

<style lang="scss" scoped></style>

Props

属性	说明	类型	默认值
model	表单数据模型	object	{}
labelWidth	标签宽度	string	100px
labelPosition	标签位置	string	top
disabled	是否禁用	boolean	false
gutter	el-row 间距	number	24
maxHeight	内容最大高度	string	''
formConfig	表单配置	Array	[]

Expose

方法	说明
validate	对整个表单进行校验
validateField	对部分字段进行校验
clearValidate	清除校验结果
resetFields	重置表单项