mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-01-01 09:55:28 +08:00
95 lines
2.4 KiB
Java
95 lines
2.4 KiB
Java
<!-- 操作表单值 -->
|
||
<template>
|
||
<div style="margin: 20px auto; text-align: center">
|
||
<a-button @click="getFormValue" class="mr-2"> 获取表单值 </a-button>
|
||
<a-button @click="clearFormValue" class="mr-2"> 清空表单值 </a-button>
|
||
<a-button @click="updateFormValue" class="mr-2"> 更新表单值 </a-button>
|
||
</div>
|
||
<!-- 自定义表单 -->
|
||
<BasicForm @register="registerForm" style="margin-top: 20px" />
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
//引入依赖
|
||
import { useForm, BasicForm, FormSchema } from '/@/components/Form';
|
||
|
||
//自定义表单字段
|
||
const formSchemas: FormSchema[] = [
|
||
{
|
||
field: 'visitor',
|
||
label: '来访人员',
|
||
component: 'Input',
|
||
required: true,
|
||
},
|
||
{
|
||
field: 'accessed',
|
||
label: '来访日期',
|
||
component: 'DatePicker',
|
||
required: true,
|
||
},
|
||
{
|
||
field: 'phone',
|
||
label: '来访人手机号',
|
||
component: 'Input',
|
||
required: true,
|
||
},
|
||
];
|
||
|
||
/**
|
||
* BasicForm绑定注册;
|
||
* getFieldsValue 获取所有表单值
|
||
* validate 验证通过之后的表单值,支持验证其中几个字段，validate(['visitor',...])
|
||
* setFieldsValue 更新表单值，如 setFieldsValue({'visitor':'李四',...})
|
||
* resetFields 清除所有表单值
|
||
*/
|
||
const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = useForm({
|
||
schemas: formSchemas,
|
||
//隐藏操作按钮
|
||
showActionButtonGroup: false,
|
||
labelWidth: '150px',
|
||
//默认聚焦第一个，只支持input
|
||
autoFocusFirstItem: true,
|
||
});
|
||
|
||
/**
|
||
* 获取表单值
|
||
*/
|
||
async function getFormValue() {
|
||
//获取所有值
|
||
let fieldsValue = await getFieldsValue();
|
||
console.log('fieldsValue:::', fieldsValue);
|
||
//表单验证通过后获取所有字段值
|
||
fieldsValue = await validate();
|
||
console.log('fieldsValue:::', fieldsValue);
|
||
//表单验`visitor来访人员`通过后获取的值
|
||
fieldsValue = await validate(['visitor']);
|
||
console.log('fieldsValue:::', fieldsValue);
|
||
}
|
||
|
||
/**
|
||
* 清空表单值
|
||
*/
|
||
async function clearFormValue() {
|
||
await resetFields();
|
||
}
|
||
|
||
/**
|
||
* 更新表单值
|
||
*/
|
||
async function updateFormValue() {
|
||
console.log('我进来了');
|
||
await setFieldsValue({ visitor: '李四' });
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/** 时间和数字输入框样式 */
|
||
:deep(.ant-input-number) {
|
||
width: 100%;
|
||
}
|
||
|
||
:deep(.ant-picker) {
|
||
width: 100%;
|
||
}
|
||
</style>
|