表单组件

XYGo Admin 2025-02-20 57 次阅读

Element Plus 表单最佳实践与内置表单组件

表单组件

Element Plus 表单

项目中的表单统一使用 Element Plus 的 ElForm 组件，配合 ElDialog 实现弹窗编辑。

标准表单模式

vue 复制代码

<template>
  <ElDialog v-model="visible" :title="isEdit ? '编辑' : '新增'" width="600px">
    <ElForm ref="formRef" :model="formData" :rules="rules" label-width="80px">
      <ElFormItem label="名称" prop="name">
        <ElInput v-model="formData.name" placeholder="请输入名称" />
      </ElFormItem>
      <ElFormItem label="状态" prop="status">
        <ElSelect v-model="formData.status">
          <ElOption label="正常" :value="1" />
          <ElOption label="禁用" :value="2" />
        </ElSelect>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="visible = false">取消</ElButton>
      <ElButton type="primary" @click="handleSubmit" :loading="submitting">保存</ElButton>
    </template>
  </ElDialog>
</template>

验证规则

typescript 复制代码

const rules: FormRules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

内置表单组件

组件	说明
ArtSearchBar	搜索栏组件
ArtForm	通用表单生成器
ArtImageUpload	图片上传（支持裁剪、多图）
ArtFileUpload	文件上传
ArtFileSelector	从附件库选择文件
ArtIconSelector	图标选择器
ArtColorPicker	颜色选择器
ArtArrayEditor	数组编辑器
ArtCronDesigner	Cron 表达式设计器
ArtWangEditor	富文本编辑器
ArtClickCaptcha	点选验证码
ArtDragVerify	拖拽验证
ArtExcelImport	Excel 导入
ArtExcelExport	Excel 导出

图片上传示例

vue 复制代码

<ElFormItem label="封面图">
  <ArtImageUpload v-model="formData.cover" :limit="1" />
</ElFormItem>

富文本编辑器

项目内置两种富文本方案：

WangEditor：适合简单富文本场景
md-editor-v3：适合 Markdown 文档编辑

vue 复制代码

<!-- WangEditor -->
<ArtWangEditor v-model="formData.content" />

<!-- Markdown 编辑器 -->
<MdEditor v-model="formData.content" />