useGForm

表单hook用法

基础用法

<template>
  <g-form ref="formRef" :model="data" :disabled="disabled" label-width="200px" :columns="columns"></g-form>

  <g-button type="primary" @click="submit">提交</g-button>
  <g-button type="primary" @click="resetFields">reset</g-button>



</template>

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

const data = ref({
files: []
})

const { formRef, resetFields, handleSubmit } = useGForm()

const disabled = ref(false)

async function submit() {
if(!await handleSubmit().catch(() => false)) return
  ElMessage.success('验证成功')
}

const columns = computed<ITableOrFormColumn<typeof data.value>[]>(() => {
return [
  {label: '开始时间', labelTips: '这是提示内容', prop: 'date', type: 'date', required: true},
  {label: '姓名', prop: 'username', type: 'input', required: true},
]
})
</script>

<style lang="scss" scoped>

</style>

• 入参同GForm组件传参

• 额外参数

名称	描述	类型	默认值
slots	通过slots传递插槽	[K in keyof T]: (scope: IFormScope<T>) => VNode | string | number	-

返回值

名称	描述	类型	默认值
formRef	组件ref	GFormInstance	-
tableView	组件	() => VNode	-
handleSubmit	表单提交	() => Promise	-
resetFields	表单重置	() => any	-