22 element-ui之Form表單el-form標簽

 

Form 表單：

由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗、提交數據。

                <el-form :model="loginForm" :rules="rules" ref="loginForm">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" placeholder="用戶名"><span>dsfsf</span></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="密碼" v-model="loginForm.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')" class="submit_btn">登陸</el-button>
                      </el-form-item>
                </el-form>

:model：綁定如下的數據：

export default {
　　data(){
　　return {
　　　　loginForm: {
　　　　　　username: '',
　　　　　　password: '',
　　　　　　},

:rules:  表單驗證規則

    rules: {
                    username: [
                        { required: true, message: '請輸入用戶名', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '請輸入密碼', trigger: 'blur' }
                    ],
                },

 

 

具體用法參考官網吧，中文的。

https://element.eleme.cn/#/zh-CN/component/form