element可增減表單項相關問題記錄

最近在公司專案中發現的乙個bug，

首先說明一下這塊的乙個需求：

有一塊的表單含有非常密集的行內表單項，一行六七個，還要可增減t^t，小白**得淚流滿面，研究element官方文件也沒太研究明白，而且這個需求又導致我沒辦法直接復用文件的**，就上網各種找，一開始還踩了雷，這裡給大家推薦一篇部落格，親測好用：

這裡給大家提個醒，v-for的key一定要設定好，我一開始習慣性用了index，導致後面校驗結果提示錯位的bug，折騰了好久，又去錄了一遍官方文件才解決。

個人建議按照官方文件來，用date資料，確保生成的表單項的唯一性

data()

],num:
[(\d+)$|^[+](\d+\.\d+)$/
,            message:
'請輸入乙個非負數'
,            trigger:
'blur',}
,],}
,}}

:prop="

'rulelist.' + index + '.name'
"    :rules
="ruleformrules.name"
>
el-form-item
>
:prop="
'rulelist.' + index + '.num'
"    :rules
="ruleformrules.num"
>
el-form-item
>

element清空表單

在element中有對於表單進行重置的方法，為了達到重置的效果，可以對單個框進行重置，進入element ui檢視原始碼，在webstorm中ctrl 左鍵，發現有resetfield 方法 清空單個輸入框，最主要的是找到這個field let fields this.refs 表單名稱 field...

清除 Element 表單校驗

當彈框增加與修改復用同乙個彈框時 彈框與父介面在同乙個頁面，並且將該頁面進行快取 會出現上一次檢驗的提示 1 點選開啟彈框 2operate val,row else 清除表單中的值 9this.refs.ruleform.resetfields 對整個表單進行重置，將所有字段值重置為初始值並移除校...

element有關表單驗證

表單驗證的基礎是官網的api rules 位置放置在el form標籤當中 例如 rules formrules formrules則是放在data當中，其結構為 最後會附上一些相關例項 formrules phone message 請輸入正確的手機號 當然，其中的條件是多種多樣的，根據自己的專案...