MG Design

Appearance

Form 表单 ​

由输入框、选择器等组件组成的表单，基于 el-form 封装，API 完全兼容，默认插槽放置 el-form-item。

基础用法 ​

用户名
类型
请选择
查看代码
vue
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', type: '' })
</script>

<template>
  <MgForm :model="form" label-width="80px">
    <el-form-item label="用户名">
      <MgInput v-model="form.name" />
    </el-form-item>
    <el-form-item label="类型">
      <MgSelect v-model="form.type">
        <el-option label="管理员" value="admin" />
      </MgSelect>
    </el-form-item>
  </MgForm>
</template>

行内表单 ​

用户名
类型
请选择
查看代码
vue
<template>
  <MgForm :model="form" inline>
    <el-form-item label="用户名"><MgInput v-model="form.name" /></el-form-item>
    <el-form-item label="类型"><MgSelect v-model="form.type" /></el-form-item>
  </MgForm>
</template>

Attributes ​

继承 Element Plus Form 的全部 Attributes。

参数说明类型默认值
model表单数据对象object-
rules校验规则object-
inline行内布局booleanfalse
label-width标签宽度string | number-
label-position标签位置'left' | 'right' | 'top'right

差异 ​

MgForm 追加 .mg-form 类名；默认插槽放置 el-form-item，组合 MgInput/MgSelect 等组件使用。