TgForm 表单
# TgForm
# Attributes
| 属性名 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| page | 页面模型 | Object | {} | |
| isFirstFocus | 页面打开，第一个控件是否获取焦点 | Boolean | true | |
| labelWidth | label的宽度 | 120 | ||
| 继承el-form的所有属性 |
# Events
| 名称 | 说明 | 类型 | 参数 |
|---|---|---|---|
| validate | 表单校验 | Functon | callback |
| validateField | 校验表单的某个字段 | Functon | props |
| resetFields | 重置该表单，移除校验结果 | Functon | props |
| scrollToField | 滚动到指定的字段 | Functon | prop |
| clearValidate | 清理某个字段的表单校验信息 | Functon | props |
# 示例代码
# 基本用法
<template>
<TgForm ref="tgPage" :page="page">
</TgForm>
</template>
<script setup name="PageDemo_Form_Input">
import CommonPage from "@coreCommonPage";
let {page} = CommonPage()
page.context.name='PageDemo_Form_Input'
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 修改表单的宽度
<template>
<TgForm ref="tgPage" :page="page" :labelWidth="200">
</TgForm>
</template>
<script setup name="PageDemo_Form_Input">
import CommonPage from "@coreCommonPage";
let {page} = CommonPage()
page.context.name='PageDemo_Form_Input'
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 设置表单第一个控件默认不获取焦点
<template>
<TgForm ref="tgPage" :page="page" :isFirstFocus="false">
</TgForm>
</template>
<script setup name="PageDemo_Form_Input">
import CommonPage from "@coreCommonPage";
let {page} = CommonPage()
page.context.name='PageDemo_Form_Input'
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
上次更新: 2024/6/6 09:37:59