目录
概要
整体实现流程
实现动态表单生成方法
动态表单效果
实现动态校验规则
实现动态ref验证
小结
概要
业务就是根据后端的动态数据。来分配表单，做一个根据数据生成表单的一个内容，
下面业务就做一个动态表单 ，共享数据表单和动态表单整合合并暂时不做教程
整体实现流程
1.使用reactive生成动态表单对象
2.使用reactive id为key生成formRules动态校验规则
3.使用ref id为key 生成每一个动态表单的ref
实现动态表单生成方法
提示：根据后端发过来的数据生成表单，做新增或者修改 --已新增为列子
我的JSON
[
{
"id": 7,
"countryf": "马来西亚令吉",
"countryCodef": "MYR",
"sitef": "马来西亚",
"toCountryf": "1.6118",
"toRmbf": "0.6204",
"deleteFlag": null,
"createTime": null,
"createUser": null,
"updateTime": null,
"updateUser": null
},
{
"id": 18,
"countryf": "越南盾",
"countryCodef": "VND",
"sitef": "越南",
"toCountryf": "0.0002858",
"toRmbf": "3499.3568",
"deleteFlag": null,
"createTime": null,
"createUser": null,
"updateTime": null,
"updateUser": null
},
{
"id": 19,
"countryf": "泰国泰铢",
"countryCodef": "THB",
"sitef": "泰国",
"toCountryf": "0.2042",
"toRmbf": "4.8963",
"deleteFlag": null,
"createTime": null,
"createUser": null,
"updateTime": null,
"updateUser": null
},
{
"id": 20,
"countryf": "菲律宾比索",
"countryCodef": "PHP",
"sitef": "菲律宾",
"toCountryf": "0.1255",
"toRmbf": "7.9683",
"deleteFlag": null,
"createTime": null,
"createUser": null,
"updateTime": null,
"updateUser": null
},
{
"id": 21,
"countryf": "新加坡元",
"countryCodef": "SGD",
"sitef": "新加坡",
"toCountryf": "5.4241",
"toRmbf": "0.1844",
"deleteFlag": null,
"createTime": null,
"createUser": null,
"updateTime": null,
"updateUser": null
}
]
看json有那么就可以已id作为key或者其他数据 js的方法
//定义一个数据集合
const exchangeRateList = ref([])
//表单对象动态
const sitefformData=reactive({})
//校规则
const formRules = reactive({
})
//标签页切换
const activeKey = ref(0);
//定义一个打开抽屉方法或者组件加载的生命周期你 record, shopnames 是我修改的参数 新增可以删除
const onOpen = async (record, shopnames) => {
await getExchangeRate() //数据处理的方法
}
const getExchangeRate = () => {
financeExchangeRateApi.financeExchangeRatePage().then(res => {
exchangeRateList.value = res.records //存放数据集合
exchangeRateList.value.forEach(record => {
// 使用 record 的 value 属性作为 key，创建响应式的表单数据对象
const key = record.countryCodef;
sitefformData[key] = {} //生成每一个表单对象 {} 可以添加默认值
//例如{exchangeRatef: record.toCountryf}
});
})
}vue3页面实现
:a-tabs:是一个表格
a-tab-pane:为标签页
forceRender：激活每一个标签页，不然校验规则不生效的
<a-tabs v-model:activeKey="activeKey" @change="handleTabClick">
<a-tab-pane v-for="(tab, indexs) in exchangeRateList" :key="indexs" :tab="tab.sitef"
forceRender
>
<a-form :model="sitefformData[tab.countryCodef]"
layout="inline">
<a-form-item label="平台佣金费率：" name="commissionf" style="margin-bottom: 16px;">
<a-input v-model:value="sitefformData[tab.countryCodef].commissionf"
placeholder="请输入平台佣金费率"
suffix="%" />
</a-form-item>
</a-tab-pane>
</a-tabs>动态表单效果
点击标签切换就可以看到每一个表单的的内容
实现动态校验规则
提示：只有表单还是不行 需要动态规则的校验，不然用户填写什么都可以做那还是不行
就准备校验规则的实现
1.const formRules = reactive({}) //定义校验规则
2.在getExchangeRate()添加校验规则
const onOpen = async (record, shopnames) => {
await getExchangeRate() //数据处理的方法
}
const getExchangeRate = () => {
financeExchangeRateApi.financeExchangeRatePage().then(res => {
exchangeRateList.value = res.records //存放数据集合
exchangeRateList.value.forEach(record => {
// 使用 record 的 value 属性作为 key，创建响应式的表单数据对象
const key = record.countryCodef;
sitefformData[key] = {} //生成每一个表单对象 {} 可以添加默认值
//例如{exchangeRatef: record.toCountryf}
//添加校验规则
formRules[key] = {commissionf: [required('请填写平台佣金费率')]}
});
})
}3.vue页面 添加:rules="formRules[tab.countryCodef]"
<a-tab-pane v-for="(tab, indexs) in exchangeRateList" :key="indexs" :tab="tab.sitef"
:rules="formRules[tab.countryCodef]"
forceRender
>
4.这样就为每一个表单都添加了一个校验规则
实现动态ref验证
例如：
只有校验规则还是不行 如果用户点击保存还是需要 函数进行校验才可以通过保存 所以要为每一个校验规则都绑定一个ref验证的函数
1.定义const formRefs = ref([]) // 用于存储表单引用的数组
2.在form表单添加 ref校验 为什么这样写 你会发现当你切换标签页 其实 activeKey也是跟着变化的，这个就是他的索引,切换就可以拿到他的对象
<a-form :model="sitefformData[tab.countryCodef]" :rules="formRules[tab.countryCodef]"
:ref="setFormRef(indexs)" layout="inline">3.定义引用方法
// 设置表单引用的函数
const setFormRef = (index) => {
return (el) => {
formRefs.value[index] = el;
};
};
4.在保存方法添加 这样循环每一个标签页 是否都校验成功
const onSubmit = async () => {
await nextTick()
const promises = formRefs.value.map((formRef) => formRef.validate());
// 使用 Promise.all 等待所有表单校验完成
Promise.all(promises).then(() => {
})
}小结
提示：这样你就可以动态生成表单，动态校验规则了
及时关注我！！，学习更多知识
