form 表单

以数据驱动的form表单组件

所有属性都继承自element-plus

基础用法

<template>
  <div>
    <g-form :model="data" :col-num="1" :columns="formColums"></g-form>
    <div class="flex-jasc-end">
      <g-button @click="handleSubmit" type="primary">提交</g-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { GForm, GButton, ITableOrFormColumn } from 'gao-components-plus';
import { ref } from 'vue';
type TFormData = {
  name: string
  age: number
  job: number
  remark: string
  birth: string
}
const data = ref<TFormData>({} as TFormData)
const formColums = ref<ITableOrFormColumn<TFormData>[]>([
  {label: '姓名', prop: 'name', type: 'input'},
  {label: '年龄', prop: 'age', type: 'number'},
  {label: '出生日期', prop: 'birth', type: 'date'},
  {label: '职业', prop: 'job', type: 'select', options: [{label: '军人', value: 1}, {label: '教师', value: 2}]},
  {label: '备注', prop: 'remark', type: 'textarea'},
])

function handleSubmit() {
  ElMessage.success(`内容为==>${JSON.stringify(data.value)}`)
}
</script>

使用template自定义表单项

<template>
  <div>
    <g-form :model="data" :col-num="1" :columns="formColums">
      <template #age="scoped">自定义的age字段{{ scoped }}</template>
    </g-form>
    <div class="flex-jasc-end">
      <g-button @click="handleSubmit" type="primary">提交</g-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { GForm, GButton, ITableOrFormColumn } from 'gao-components-plus';
import { ref } from 'vue';

type TFormData = {
  name: string
  age: number
}

const data = ref<TFormData>({} as TFormData)
const formColums = ref<ITableOrFormColumn<TFormData>[]>([
  {label: '姓名', prop: 'name', type: 'input'},
  {label: '年龄', prop: 'age', type: 'number'}
])

function handleSubmit() {
  ElMessage.success(`内容为==>${JSON.stringify(data.value)}`)
}
</script>

使用formRender自定义表单项

<template>
  <div>
    <g-form :model="data" :col-num="1" :columns="formColums"></g-form>
    <div class="flex-jasc-end">
      <g-button @click="handleSubmit" type="primary">提交</g-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { GForm, GButton, ITableOrFormColumn } from 'gao-components-plus';
import { ref } from 'vue';

type TFormData = {
  name: string
  age: number
}

const data = ref<TFormData>({} as TFormData)
const formColums = ref<ITableOrFormColumn<TFormData>[]>([
  {label: '姓名', prop: 'name', type: 'input', formRender({column, data}) {
    return `自定义的==${column.label} ==${data.name}`
  }},
  {label: '年龄', prop: 'age', type: 'number'}
])

function handleSubmit() {
  ElMessage.success(`内容为==>${JSON.stringify(data.value)}`)
}
</script>

input原生插槽

<template>
  <div>
    <g-form :model="data" :col-num="1" :columns="formColums"></g-form>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { GForm, ITableOrFormColumn } from 'gao-components-plus';
import { ref } from 'vue';

type TFormData = {
  name: string
  age: number
}

const data = ref<TFormData>({} as TFormData)
const formColums = ref<ITableOrFormColumn<TFormData>[]>([
  {label: '姓名', prop: 'name', type: 'input', prefix: 'prefix', suffix: 'suffix', prepend: 'prepend', append: 'append', placeholder: '请输入姓名'},
  {label: '年龄', prop: 'age', type: 'number', placeholder: '请输入年龄'},
])

</script>

校验

分别支持rules和columns中的rules

<template>
  <div>
    <g-form ref="formRef" :model="data" :rules="rules" :col-num="1" :columns="formColums"></g-form>
    <div class="flex-jasc-end">
      <g-button @click="handleSubmit" type="primary">校验</g-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { GFormInstance, ITableOrFormColumn } from 'gao-components-plus';
import { GForm, GButton } from 'gao-components-plus';
import { ref, useTemplateRef } from 'vue';

type TFormData = {
  name: string
  age: number
}

const formRef = useTemplateRef<GFormInstance>('formRef')


const data = ref<TFormData>({} as TFormData)
// 校验规则
const rules = ref<FormRules>({
  age: {required: true, message: '通过props.rules校验==年龄不能为空', trigger: 'blur'},
})
// 
const formColums = ref<ITableOrFormColumn<TFormData>[]>([
  {label: '姓名', prop: 'name', type: 'input', placeholder: '请输入姓名', rules: {required: true, message: '通过columns配置校验规则==姓名不能为空', trigger: 'blur'}},
  {label: '年龄', prop: 'age', type: 'number', placeholder: '请输入年龄'},
])

async function handleSubmit() {
  const ret = await formRef.value?.GForm?.validate().catch(() => false)
  if(ret) return ElMessage.success('校验通过')
}
</script>

属性

除以下属性外，其他属性都继承自element-plus

名称	描述	类型	默认值
model	绑定的数据	Object	-
rules	校验规则	FormRules	-
colNum	表单列数	Number	1
columns	表单项配置	IformITableOrFormColumn[]	-
labelWidth	label宽度	String Number	auto

columns配置项

名称	描述	类型	默认值
label	label	String	-
prop	绑定的key	String	-
type	表单项类型	'input' 'textarea' 'number' 'color' 'upload' 'select' 'radio' 'switch' 'date' 'dates' 'daterange' 'datetime' 'datetimerange' 'month' 'months' 'monthrange''year' 'years' 'yearrange' 'week' 'weekrange'	-
labelWidth	label宽度	string | number	继承gform
span	列宽 能被24整除的整数	number	24/colNum
clearable	可被清除	boolean	false
showAlpha	颜色是否显示透明(仅type=color)	boolean	true
unlinkPanels	左右无关联(仅type=daterange、datetimerange、monthrange、yearrange、weekrange)	string	-
renderPickerCell	日期自定义渲染(仅type=daterange、datetimerange、monthrange、yearrange、weekrange)	(cell: DateCell) => VNode | string	-
options	下拉选项(仅type=select、radio)	Array	-
uploadConfig	上传文件配置	GUploadProps	-
onInput	input事件	(value) => void	-
onChange	change事件	(value) => void	-
formRender	自定义渲染表单项	({column, data}) => VNode | string	-
labelRender	自定义渲染label	({column, data}) => VNode | string	-
labelTips	label提示	string	-

方法&实例

<g-form ref="formRef"></g-form>
<script>
const formRef = useTemplateRef<GFormInstance>('formRef')

formRef.value?.GForm 返回的是element-plus的form实例

</script>