關(guān)于form表單的文章
| 文章內(nèi)容 | 文章鏈接 |
|---|---|
| Form表單提交和校驗(yàn) | https://blog.csdn.net/XSL_HR/article/details/128495087?spm=1001.2014.3001.5501 |
| Form表單的嵌套使用 | https://blog.csdn.net/XSL_HR/article/details/128488913?spm=1001.2014.3001.5501 |
| Form表單的動(dòng)態(tài)校驗(yàn)規(guī)則 | https://blog.csdn.net/XSL_HR/article/details/128437275?spm=1001.2014.3001.5501 |
場(chǎng)景復(fù)現(xiàn)
往期文章介紹了form表單的嵌套使用、UI界面實(shí)現(xiàn)、數(shù)據(jù)的動(dòng)態(tài)綁定、動(dòng)態(tài)校驗(yàn)規(guī)則、提交表單數(shù)據(jù)，本期文章將繼續(xù)介紹 form表單的重置功能。ant design vue組件庫(kù)中的form表單有一個(gè)自帶的重置函數(shù)——resetFields()。在這里我會(huì)帶著大家模仿ant design vue組件庫(kù)中帶有重置功能的表單來實(shí)現(xiàn)項(xiàng)目中的重置功能。
溫馨提示：resetFileds()函數(shù)有時(shí)候也會(huì)失效，這個(gè)時(shí)候我們需要手寫一個(gè)重置功能【下期文章詳細(xì)分享】
最終實(shí)現(xiàn)效果：
resetFields()重置表單數(shù)據(jù)
首先，我們來看一下ant design vue組件庫(kù)中含有重置功能的表單是如何實(shí)現(xiàn)最終效果的。
帶有重置功能的表單組件在文檔中的位置如上圖，下面我們來看看它是怎么實(shí)現(xiàn)的：
- 1.首先綁定了一個(gè)formRef的數(shù)據(jù)
- 2.綁定點(diǎn)擊事件，調(diào)用重置功能函數(shù)
3.變量定義與類型引入
4.在重置功能函數(shù)中調(diào)用resetFields函數(shù)
官方文檔中resetFields的用法如下：
實(shí)現(xiàn)效果：
項(xiàng)目實(shí)戰(zhàn)
我們仿造上面的步驟來實(shí)現(xiàn)一下重置功能
分別在form標(biāo)簽中綁定ref屬性，在button按鈕中綁定點(diǎn)擊事件，調(diào)用函數(shù)文章來源：http://www.zghlxwxcb.cn/news/detail-788150.html
import { FormInstance } from 'ant-design-vue';
const formRef = ref<FormInstance>();
const cancel = () => {
formRef.value?.resetFields(); // 重置處理
// router.push('/count')
};
此時(shí)重置功能已經(jīng)實(shí)現(xiàn)，實(shí)際上很簡(jiǎn)單，注意form和button標(biāo)簽內(nèi)屬性的處理即可。
文章來源地址http://www.zghlxwxcb.cn/news/detail-788150.html
- 但是有時(shí)候resetFields方法會(huì)失效。
- 實(shí)際情況為，點(diǎn)擊取消后表單數(shù)據(jù)沒有清空，只清除了校驗(yàn)結(jié)果。
- 這可能是嵌套層數(shù)過多而導(dǎo)致的，這時(shí)候我們就需要手寫一個(gè)重置功能。（具體內(nèi)容我們下期文章詳細(xì)介紹）
到了這里，關(guān)于vue3 antd項(xiàng)目實(shí)戰(zhàn)——Form表單的重置【使用resetFields()重置form表單數(shù)據(jù)、清空輸入框】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
