element中的el-form踩的坑


1.

prop對應的不單單是rules規則里面的驗證項,同時對應着我們form-item下的v-model的值。prop綁定的類要與el-form-item下的v-model的值相對應。我們將其做個修改

 
 
rules規則:
 
2.綁定規則:
1 <el-form ref="elForm" :model="formData" :rules="addRules" size="medium" label-width="100px">
2 </el-form>

上述代碼中 :model 綁定的是內部要提交的form數據 :rules= 綁定的是驗證規則

其標簽內部代碼:

1 <el-form-item label="用戶名" prop="username">
2    <el-input v-model="formData.username" placeholder="請輸入用戶名" clearable :style="{width: '100%'}">
3    </el-input>
4 </el-form-item>

其中 prop 代表屬性, input 標簽中的 v-model 綁定的form表單數據的key值要與其一致

3.彈框形式的表單中:

1 <el-dialog v-bind="$attrs" v-on="$listeners" :visible.sync="openAdd" @open="onOpen" @close="onClose" title="添加用戶">
2 </el-dialog>

其中 :visible.sync 綁定的是彈框是否顯示,true時2顯示,false時不顯示,上述是采用一個變量的形式動態改變的;

 title 表示彈框上顯示的彈框名稱,上述會在彈框左上角顯示“添加用戶”

其他綁定還未詳細了解,了解后再進行描述

 

關於element-ui的表單和表單驗證,可以參考:https://blog.csdn.net/rudy_zhou/article/details/106626573

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM