vue3 Ant Design Vue实现动态表单 动态校验规则 动态验证

目录

概要

整体实现流程

实现动态表单生成方法

动态表单效果

实现动态校验规则

实现动态 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：激活每一个标签页，不然校验规则不生效的

动态表单效果

点击标签切换就可以看到每一个表单的的内容

实现动态校验规则

提示：只有表单还是不行 需要动态规则的校验，不然用户填写什么都可以做那还是不行

就准备校验规则的实现

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]”

:rules=”formRules[tab.countryCodef]”
                    forceRender
                     >

4. 这样就为每一个表单都添加了一个校验规则

实现动态 ref 验证

例如：

只有校验规则还是不行 如果用户点击保存还是需要 函数进行校验才可以通过保存 所以要为每一个校验规则都绑定一个 ref 验证的函数

1. 定义 const formRefs = ref([]) // 用于存储表单引用的数组 

2. 在 form 表单添加 ref 校验 为什么这样写 你会发现当你切换标签页 其实 activeKey 也是跟着变化的，这个就是他的索引, 切换就可以拿到他的对象

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(() => {})
}

小结

提示：这样你就可以动态生成表单，动态校验规则了

及时关注我！！，学习更多知识