FormPro
Basic 基础使用
*
姓名
:
*
手机号
:
Rate 评分
:
before内容
零落梅花过残腊,故园归醉及新年。
after内容
Avatar 头像
:
vue
<template>
<div>
<el-form-pro @register="theFormPro" @submit="onHandleSubmit" />
</div>
</template>
<script setup lang="ts">
import { h, onMounted } from 'vue'
// import ElFormPro, { useForm } from '@shixinde/element-promax'
import ElFormPro, { useForm } from '@element-plus/components/form-pro'
// 使用组件库请使用下方注释代码
// import { useForm } from '@shixinde/element-promax'
const [theFormPro, { setProps: setFormProProps }] = useForm()
// 数据: FormProSchema
const onGetSchemaData = () => {
return {
schemas: [
{
field: 'nickname',
components: 'Input',
label: '姓名',
ifShow: () => true,
dynamicRules: (ruleParams) => {
const { nickname } = ruleParams
return {
required: true,
// message: '请输入姓名',
validator: () => {
if (!nickname) {
return Promise.reject(new Error('请输入姓名'))
}
return Promise.resolve()
},
}
},
},
{
field: 'phone',
components: 'Input',
label: '手机号',
dynamicRules: (ruleParams) => {
const { phone } = ruleParams
return {
required: true,
// message: '请输入活动名称',
validator: () => {
if (!phone) {
return Promise.reject(new Error('请输入手机号'))
}
return Promise.resolve()
},
}
},
},
{
field: 'rate',
components: 'Rate',
label: 'Rate 评分',
after: () => {
return h('div', {}, 'after内容')
},
before: () => {
return h('div', {}, 'before内容')
},
end: () => {
return h(
'div',
{
style: {
color: 'red',
},
},
'零落梅花过残腊,故园归醉及新年。'
)
},
},
{
field: 'Avatar',
components: 'Avatar',
label: 'Avatar 头像',
componentProps: {
shape: 'square',
size: 'large',
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
},
},
],
showFooter: true,
}
}
const onHandleSubmit = (e: any, e2: any) => {
console.log('onHandleSubmit ===>', e, e2)
}
onMounted(() => {
setFormProProps(onGetSchemaData())
})
</script>
Hide source
form-pro 全部用法
*
姓名
:
*
手机号
:
textarea
:
InputNumber
:
Mention提及
:
显示子组件
:
测试使用componentProps -- Select a value
slot组件
:
插槽1[点击修改nickname值]{
"mention": "@"
}
插槽3[点击修改checkboxGroup值]{
"mention": "@"
}
slot组件2
:
插槽2
radio组件
:
radioGroup组件
:
radioButton组件
:
Checkbox组件
:
CheckboxGroup组件
:
CheckboxButton组件
:
Rate 评分
:
slider 滑块
:
Switch 开关
:
transfer 穿梭框
:
No data
No data
TreeSelect 树型选择
:
Select
Avatar 头像
:
vue
<template>
<div>
<!-- v-bind="onGetSchemaData()" -->
<el-form-pro @register="theFormPro" @submit="onHandleSubmit">
<template #slotANode="{ model }">
<!--
style="width: 100px; height: 100px; background-color: pink" -->
<div @click="model.nickname = '1'">
插槽1[点击修改nickname值]{{ model }}
</div>
<br />
<div @click="model.checkboxGroup = ['1']">
插槽3[点击修改checkboxGroup值]{{ model }}
</div>
</template>
<template #slotANode2>
<div style="width: 100px; height: 100px; background-color: skyblue">
插槽2
</div>
</template>
</el-form-pro>
<el-space direction="vertical" wrap>
<el-button @click="onGetFormProFieldsValue">
获取所有字段值 getFieldsValue
</el-button>
<el-button @click="onSetFormProFieldsValue">
动态给字段赋值 setFieldsValue
</el-button>
<el-button @click="onResetFormProFields">
清空字段 resetFields
</el-button>
<el-button @click="onClearFormProValidate">
清空校验 clearValidate
</el-button>
<el-button @click="onClearFormProValidate('nickname')">
清空校验单个校验 clearValidate(name:string)
</el-button>
</el-space>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
// import { ElFormPro } from '@element-plus/components/form-pro'
import ElFormPro, { useForm } from '@element-plus/components/form-pro'
import ElSpace from '@element-plus/components/space'
import ElButton from '@element-plus/components/button'
const [
theFormPro,
{
setProps: setFormProProps,
setFieldsValue: setFormProFieldsValue,
getFieldsValue: getFormProFieldsValue,
resetFields: resetFormProFields,
clearValidate: clearFormProValidate,
// getChildrenFieldsValue,
// resetFields,
// resetAllModel,
// updateSchema,
// removeSchemaByFiled,
// appendSchemaByField,
// validateFields,
// validate,
// submit,
// reset,
// resetAllModel,
// clearValidate,
// updateSchema,
// removeSchemaByFiled,
},
] = useForm()
// import type { FormProSchema } from '@element-plus/components/form-pro'
// 布局
const theLayoutData = {
rowOptions: {
gutter: 20,
},
labelCol: {
span: 4,
md: {
span: 6,
} as any,
xxl: {
span: 7,
} as any,
},
wrapperCol: {
span: 20,
md: {
span: 14,
} as any,
xxl: {
span: 9,
} as any,
},
actionColOptions: {
span: 4,
offset: 4,
md: {
offset: 6,
} as any,
xxl: {
offset: 7,
} as any,
},
}
// 数据: FormProSchema
const onGetSchemaData = () => {
const generateData = () => {
const data: any[] = []
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `Option ${i}`,
disabled: i % 4 === 0,
})
}
return data
}
return {
schemas: [
{
field: 'nickname',
components: 'Input',
label: '姓名',
ifShow: () => true,
dynamicRules: (ruleParams) => {
const { nickname } = ruleParams
return {
required: true,
// message: '请输入姓名',
validator: () => {
if (!nickname) {
return Promise.reject(new Error('请输入姓名'))
}
return Promise.resolve()
},
}
},
},
{
field: 'phone',
components: 'Input',
label: '手机号',
dynamicRules: (ruleParams) => {
const { phone } = ruleParams
return {
required: true,
// message: '请输入活动名称',
validator: () => {
if (!phone) {
return Promise.reject(new Error('请输入手机号'))
}
return Promise.resolve()
},
}
},
},
{
field: 'textarea 输入框',
components: 'Input',
label: 'textarea',
componentProps: {
placeholder: '测试使用componentProps -- textarea',
type: 'textarea',
},
},
{
field: 'inputNumber 输入框',
components: 'InputNumber',
label: 'InputNumber',
componentProps: {
min: 10,
max: 20,
},
},
{
field: 'mention',
components: 'Mention',
label: 'Mention提及',
modelValue: '@',
componentProps: {
placeholder: 'componentProps -- Mention提及',
options: [
{
label: 'Fuphoenixes',
value: 'Fuphoenixes',
},
{
label: 'kooriookami',
value: 'kooriookami',
},
{
label: 'Jeremy',
value: 'Jeremy',
},
{
label: 'btea',
value: 'btea',
},
],
},
},
{
field: 'showComp',
components: 'Select',
label: '显示子组件',
componentProps: {
placeholder: '测试使用componentProps -- Select a value',
options: [
{
label: '显示',
value: '1',
},
{
label: '不显示',
value: '2',
},
],
},
},
{
field: 'isShow',
components: 'Input',
label: 'isShow',
ifShow: (e: any) => {
return e.showComp == '1'
},
},
{
field: 'slot',
components: 'Slot',
slotName: 'slotANode',
label: 'slot组件',
},
{
field: 'slot2',
components: 'Slot',
slotName: 'slotANode2',
label: 'slot组件2',
},
{
field: 'radio',
components: 'Radio',
label: 'radio组件',
componentProps: {
label: '男',
value: '1',
},
},
{
field: 'radioGroup',
components: 'RadioGroup',
label: 'radioGroup组件',
componentProps: {
options: [
{
label: '男',
value: '1',
},
{
label: '女',
value: '2',
},
],
},
},
{
field: 'RadioButton',
components: 'RadioButton',
label: 'radioButton组件',
componentProps: {
options: [
{
label: '男',
value: '1',
},
{
label: '女',
value: '2',
},
],
},
},
{
field: 'checkbox',
components: 'Checkbox',
label: 'Checkbox组件',
componentProps: {
label: '男',
value: '1',
},
},
{
field: 'checkboxGroup',
components: 'CheckboxGroup',
label: 'CheckboxGroup组件',
componentProps: {
options: [
{
label: '男',
value: '1',
},
{
label: '女',
value: '1231232',
},
],
},
},
{
field: 'CheckboxButton',
components: 'CheckboxButton',
label: 'CheckboxButton组件',
componentProps: {
options: [
{
label: '男',
value: '1',
},
{
label: '女',
value: '1231232',
},
],
},
},
{
field: 'rate',
components: 'Rate',
label: 'Rate 评分',
},
{
field: 'slider',
components: 'Slider',
label: 'slider 滑块',
componentProps: {
showInput: true,
},
},
{
field: 'switch',
components: 'Switch',
label: 'Switch 开关',
},
{
field: 'transfer',
components: 'Transfer',
label: 'transfer 穿梭框',
componentProps: {
data: generateData(),
},
},
{
field: 'treeSelect',
components: 'TreeSelect',
label: 'TreeSelect 树型选择',
componentProps: {
'render-after-expand': false,
data: [
{
value: '1',
label: 'Level one 1',
children: [
{
value: '1-1',
label: 'Level two 1-1',
children: [
{
value: '1-1-1',
label: 'Level three 1-1-1',
},
],
},
],
},
{
value: '2',
label: 'Level one 2',
children: [
{
value: '2-1',
label: 'Level two 2-1',
children: [
{
value: '2-1-1',
label: 'Level three 2-1-1',
},
],
},
{
value: '2-2',
label: 'Level two 2-2',
children: [
{
value: '2-2-1',
label: 'Level three 2-2-1',
},
],
},
],
},
{
value: '3',
label: 'Level one 3',
children: [
{
value: '3-1',
label: 'Level two 3-1',
children: [
{
value: '3-1-1',
label: 'Level three 3-1-1',
},
],
},
{
value: '3-2',
label: 'Level two 3-2',
children: [
{
value: '3-2-1',
label: 'Level three 3-2-1',
},
],
},
],
},
],
},
},
{
field: 'Avatar',
components: 'Avatar',
label: 'Avatar 头像',
componentProps: {
shape: 'square',
size: 'large',
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
},
},
],
showFooter: true,
...theLayoutData,
}
}
// const theFormPro = ref()
// console.log('111 ===>', 111)
// console.log('useFormPro(theFormPro.value) ===>', useFormPro(theFormPro.value))
// const { setProps: setFormProProps } = useFormPro(theFormPro.value)
const onHandleSubmit = (e: any, e2: any) => {
console.log('onHandleSubmit ===>', e, e2)
}
const onGetFormProFieldsValue = () => {
console.log('onGetFormProFieldsValue ===>', getFormProFieldsValue())
}
const onResetFormProFields = () => {
resetFormProFields()
}
const onClearFormProValidate = (name?: any) => {
clearFormProValidate(name)
}
const onSetFormProFieldsValue = () => {
setFormProFieldsValue({
nickname: '1161',
})
}
onMounted(() => {
setFormProProps(onGetSchemaData())
// console.log('theFormPro.value ===>', theFormPro.value)
// useFormPro(666666666)
// console.log('theFormPro.value ===>')
// setFormProProps(onGetSchemaData())
})
</script>
Hide source
FormPro API
支持的组件
FormPro Attributes
tip:所有参数都可以通过
useForm
的回调函数 ==>setProps
赋值
Name | Description | Type | Default |
---|---|---|---|
schemas | 表单配置规则 | Array | () => [] |
showFooter | 是否显示底部按钮 | Boolean | true |
rowOptions | 表单行Row - 行布局 | object | () => ({ gutter: 20 }) |
labelCol | 表单列Col - label布局 | object | () => ({ span: 4 }) |
wrapperCol | 表单列Col - 表单内容布局 | object ` | () => ({ span: 18 }) |
actionColOptions | 表单底部布局 | object | () => ( |
schemas 配置
Name | Description | Type | 其他介绍 |
---|---|---|---|
field | 表单字段绑定值 | Array | () => [] |
label | 表单字段名 | Boolean | true |
components | 绑定的组件 | Object | 支持的组件 |
modelValue | 字段绑定值 | Object | 可以赋予默认值使用 |
ifShow | 字段是否显示 | Object ` | (formValues: any, formValues2: any, formValues3: any) => boolean |
dynamicRules | 自定义校验 | Function | (formValues: any) => Boolean |
message | 快捷校验内容 | String | —— |
componentProps | 根组件传参 | Object | 根组件传参所需的值可通过对象在此绑定 |
slotName | 插槽名称 | String | 当组件类型为插槽时,须配合slotName添加具名插槽名称 |
end | 底部插入 | Function | 可配合h函数使用 ( )=>{ h( [ div,{}, |
FormPro 事件
Name | Description | 回调函数 |
---|---|---|
register | 使用 useForm 的回调 | Object |
submit | 验证成功的确定回调 | Object |
submit-error | 验证失败的确定回调 | Object |
reset | 点击重置的回调 | Object |