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