FormGrid

示例

基本使用

<template>
  <div>
    <SuperFormGrid :field="field" :model="form"></SuperFormGrid>
  </div>
</template>

<script lang="ts" setup>
import {  reactive } from 'vue'

const form = reactive({
  name: '',
  sex: '',
  phone: '',
  startTime: '',
  endTime: ''
})
const field = [
  {
    label: '姓名',
    name: 'name',
    el: 'ElInput',
    tooltip: '这是一个提示信息',
    span: 2,
  },
  {
    label: '性别',
    name: 'sex',
    el: 'ElSelect',
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' },
    ],
    span: 2,
  },
  {
    label: '手机号',
    name: 'phone',
    el: 'ElInput',
    span: 2,
  },
  {
    label: '开始时间',
    name: 'startTime',
    el: 'ElDatePicker',
    span: 2,
  },
  {
    label: '结束时间',
    name: 'endTime',
    el: 'ElDatePicker',
    span: 2,
  },
]
</script>

全部禁用

需要配置: disabled

<template>
  <div>
    <SuperFormGrid :field="field" :model="form" disabled></SuperFormGrid>
  </div>
</template>

<script lang="ts" setup>
import {  reactive } from 'vue'

const form = reactive({
  name: '',
  sex: '',
  phone: '',
  startTime: '',
  endTime: ''
})
const field = [
  {
    label: '姓名',
    name: 'name',
    el: 'ElInput',
    tooltip: '这是一个提示信息',
    span: 2,
  },
  {
    label: '性别',
    name: 'sex',
    el: 'ElSelect',
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' },
    ],
    span: 2,
  },
  {
    label: '手机号',
    name: 'phone',
    el: 'ElInput',
    span: 2,
  },
  {
    label: '开始时间',
    name: 'startTime',
    el: 'ElDatePicker',
    span: 2,
  },
  {
    label: '结束时间',
    name: 'endTime',
    el: 'ElDatePicker',
    span: 2,
  },
]
</script>

设置组件属性

需要配置: componentProps

<template>
  <div>
    <SuperFormGrid :field="field" :model="form"></SuperFormGrid>
  </div>
</template>

<script lang="ts" setup>
import {  reactive } from 'vue'

const form = reactive({
  name: '',
  sex: '',
  phone: '',
  startTime: '',
  endTime: '',
  year: '',
  month: '',
})
const field = [
  {
    label: '姓名',
    name: 'name',
    el: 'ElInput',
    componentProps: {
      disabled: true
    },
    tooltip: '这是一个提示信息',
    span: 2,
  },
  {
    label: '性别',
    name: 'sex',
    el: 'ElSelect',
    componentProps: {
      placeholder: '请选择性别',
      clearable: true,
    },
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' },
    ],
    span: 2,
  },
  {
    label: '手机号',
    name: 'phone',
    el: 'ElInput',
    componentProps: {
      placeholder: '请输入手机号',
      clearable: true,
    },
    span: 2,
  },
  {
    label: '开始时间',
    name: 'startTime',
    el: 'ElDatePicker',
    componentProps: {
      placeholder: '请选择开始时间',
      clearable: true,
    },
    span: 2,
  },
  {
    label: '结束时间',
    name: 'endTime',
    el: 'ElDatePicker',
    componentProps: {
      placeholder: '请选择结束时间',
      clearable: true,
    },
    span: 2,
  },
  {
    label: '年份选择',
    name: 'year',
    el: 'ElDatePicker',
    componentProps: {
      placeholder: '请选择年份',
      clearable: true,
      type: 'year',
    },
    span: 2,
  },
  {
    label: '月份选择',
    name: 'month',
    el: 'ElDatePicker',
    componentProps: {
      placeholder: '请选择月份',
      clearable: true,
      type: 'month',
    },
    span: 2,
  },
]
</script>

表单验证

必填验证: required: true 手机号验证: valueType: 'phone' 自定义验证验证: formItemProps: {rules: [required: false, message: '必填', trigger: 'blur']}

<template>
  <div>
    <SuperFormGrid ref="formGrid" :field="field" :model="form">
      <template #append>
        <el-row type="flex" justify="end">
          <el-button size="small" @click="reset">重置</el-button>
          <el-button size="small" type="primary" @click="submit">提交</el-button>
        </el-row>
      </template>
      <div>提交数据: {{ form }}</div>
    </SuperFormGrid>
  </div>
</template>

<script lang="ts" setup>
import { reactive, useTemplateRef } from 'vue'
import { ElMessage } from 'element-plus'

const formGridRef = useTemplateRef('formGrid')
const form = reactive({
  name: '',
  sex: '',
  age: '',
  phone: '',
  startTime: '',
  endTime: '',
  year: '',
  month: '',
})
const field = [
  {
    label: '姓名',
    name: 'name',
    el: 'ElInput',
    required: true,
    tooltip: '这是一个提示信息',
    span: 2,
  },
  {
    label: '性别',
    name: 'sex',
    el: 'ElSelect',
    required: true,
    componentProps: {
      placeholder: '请选择性别',
      clearable: true,
    },
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' },
    ],
    span: 2,
  },
  {
    label: '年龄',
    name: 'age',
    el: 'ElInput',
    required: true,
    formItemProps: {
      rules: [
        {
          validator: (_rule, value, callback) => {
            if (Number(value) > 10) {
              callback()
            } else {
              callback('输入值不能小于10')
            }
          },
          trigger: 'change',
        },
      ],
    },
    span: 2,
  },
  {
    label: '手机号',
    name: 'phone',
    el: 'ElInput',
    componentProps: {
      placeholder: '请输入手机号',
      clearable: true,
    },
    valueType: 'phone',
    span: 2,
  },
  {
    label: '开始时间',
    name: 'startTime',
    el: 'ElDatePicker',
    componentProps: {
      placeholder: '请选择开始时间',
      clearable: true,
    },
    required: true,
    span: 2,
  },
  {
    label: '结束时间',
    name: 'endTime',
    el: 'ElDatePicker',
    componentProps: {
      placeholder: '请选择结束时间',
      clearable: true,
    },
    formItemProps: {
      rules: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
    },
    span: 2,
  },
  {
    label: '年份选择',
    name: 'year',
    el: 'ElDatePicker',
    componentProps: {
      placeholder: '请选择年份',
      clearable: true,
      type: 'year',
    },
    required: true,
    span: 2,
  },
  {
    label: '月份选择',
    name: 'month',
    el: 'ElDatePicker',
    componentProps: {
      placeholder: '请选择月份',
      clearable: true,
      type: 'month',
    },
    required: true,
    span: 2,
  },
]

const reset = () => {
  formGridRef.value?.formRef?.resetFields()
  ElMessage.success('重置成功')
}
const submit = () => {
  formGridRef.value?.formRef?.validate(valid => {
    if (valid) {
      ElMessage.success('提交成功')
    } else {
      ElMessage.error('请填写必填项')
    }
  })
}
</script>

表单组件联动

需要配置: show 警告：当传递给show是一个响应式数据时, 需要使用函数返回

<template>
  <div>
    <SuperFormGrid :field="field" :model="form"></SuperFormGrid>
  </div>
</template>

<script lang="ts" setup>
import {  reactive } from 'vue'

const form = reactive({
  type: '',
  text: '',
  readio: "",
  checkbox: [],
  select: "",
  date: '',
})
const field = [
  {
    label: '值类型',
    name: 'type',
    el: 'ElSelect',
    componentProps: {
      placeholder: '请选择值类型',
      clearable: true,
    },
    options: [
      { label: '文本', value: '1' },
      { label: '单选', value: '2' },
      { label: '多选', value: '3' },
      { label: '下拉选择', value: '4' },
      { label: '日期', value: '5' },
    ],
    span: 2,
  },
  {
    label: '文本',
    name: 'text',
    el: 'ElInput',
    show: () => form.type === '1',
    span: 2,
  },
  {
    label: '单选',
    name: 'readio',
    el: 'ElRadioGroup',
    options: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      { label: '选项3', value: '3' },
    ],
    show: () => form.type === '2',
    span: 2,
  },
  {
    label: '多选',
    name: 'checkbox',
    el: 'ElCheckboxGroup',
    options: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      { label: '选项3', value: '3' },
    ],
    show: () => form.type === '3',
    span: 2,
  },
  {
    label: '下拉选择',
    name: 'select',
    el: 'ElSelect',
    options: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      { label: '选项3', value: '3' },
    ],
    show: () => form.type === '4',
    span: 2,
  },
  {
    label: '日期',
    name: 'date',
    el: 'ElDatePicker',
    show: () => form.type === '5',
    span: 2,
  },
]
</script>

使用插槽

需要配置: show

<template>
  <div>
    <SuperFormGrid :field="field" :model="form">
      <template #componentSlot>
        <ElInput v-model="form.message" placeholder="使用插槽自定义内容" clearable />
      </template>
      <template #formGridSlotComponent>
        <SuperGrid :gap="[10, 20]">
          <SuperGridItem :span="4">
            <el-form-item label="活动时间：">
              <div class="flx-center">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.activeStart"
                  style="width: 100%"
                ></el-date-picker>
                <span class="line">-</span>
                <el-time-picker
                  placeholder="选择时间"
                  v-model="form.activeEnd"
                  style="width: 100%"
                ></el-time-picker>
              </div>
            </el-form-item>
          </SuperGridItem>
        </SuperGrid>
      </template>

      表单数据: {{ form }}
    </SuperFormGrid>
  </div>
</template>

<script lang="tsx" setup>
import { reactive } from 'vue'
import { ElInput } from "element-plus"

const form = reactive({
  minAge: '',
  maxAge: '',
  message: '',
  activeStart: '',
  activeEnd: '',
})
const field = [
  {
    label: '年龄使用render渲染',
    name: 'age',
    el: 'ElInput',
    componentProps: {
      placeholder: '请输入姓名',
      clearable: true,
    },
    render: ({ searchParam }: any) => {
      // 普通v-model但无法使用修饰符
      return (
        <div class="flx-center">
          <ElInput v-model={searchParam.minAge} placeholder="最小年龄" />
          <span class="mr10 ml10">-</span>
          <ElInput v-model={searchParam.maxAge} placeholder="最大年龄" />
        </div>
      )
    },
    span: 4,
  },
  {
    label: '使用组件插槽',
    name: 'message',
    slotName: 'componentSlot',
    span: 4,
  },
  {
    label: '使用布局插槽',
    name: 'date',
    slotName: 'formGridSlotComponent',
    span: 4,
  },
]
</script>

API

formGrid Props

参数	说明	类型	可选值	默认值
field	表单配置列	`formItemProps[]`	-	`[]`
model	表单数据绑定	`object`	-	`{}`
searchCol	响应式布局参数	`number/object`	-	`{ xs: 1, sm: 2, md: 3, lg: 4, xl: 4 }`
ifCardStyle	是否使用 card 样式	`boolean`	`true/false`	`true`

formGridItem Props

参数	说明	类型	可选值	默认值
el	渲染组件名称	`strigng`	-	-
label	标题名称	`string`	-	-
name	props绑定名称	`string`	-	-
labelWidth	标题宽度	`number`	-	-
tooltip	标题文字提示	`string`	-	-
required	是否必填	`boolean`	-	-
valueType	内置验证规则类型	`string`	-	-
fieldNames	指定 label && value && children 的 key 值可以指定el-select他们的labelkey或valueKey	`object`	object	-
options	下拉选项数据	`EnumProps[]`	`object`	-
span	表单项所占用的列数	`number`	-	1
offset	表单项左侧偏移列数	`number`	-	-
render	自定义表单项内容渲染	`(scope: SearchRenderScope) => VNode`	-	-
scopedSlots	组件内插槽	`any`	-	-
formItemProps	透传 el-form-item 属性	`Partial<FormItemProps>`	-	-
componentProps	透传组件属性	`any`	-	-

formGrid Slots

插槽名	说明
slotName	自定义搜索内容插槽名称
append	自定义表单尾部内容
default	默认插槽,出现在表单底部

formGridItem Slots

插槽名	说明
slotName	组件内插槽

FormGrid ​

示例 ​

基本使用 ​

全部禁用 ​

设置组件属性 ​

表单验证 ​

表单组件联动 ​

使用插槽 ​

API ​

formGrid Props ​

formGridItem Props ​

formGrid Slots ​

formGridItem Slots ​