1. 程式人生 > 其它 >element中的el-form踩的坑

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