Element UI学习7--Form 表单

1、基础用法

<template>
    <div>
        <!-- model  表单数据对象 -->
        <el-form
        :model="user"
        ref="form">
            <el-form-item label="账号" prop="userNumber">
                <el-input 
                type="number" 
                v-model="user.userNumber"
                placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input 
                type="password" 
                v-model="user.password"
                placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                type="primary"
                @click="submit('form')">
                登录
                </el-button>
            </el-form-item>
       </el-form>    
    </div>
</template>
<script>
export default {
     
    data(){
     
        return{
     
            user:{
     
                userNumber:'',
                password:''
            },
        }
    }
}
</script>

如图：

2、表单验证

        <!-- model  表单数据对象 -->
        <!-- rules  表单验证规则 -->
        <el-form
        :model="user"
        :rules="rules"
        ref="form"
        >
            <el-form-item label="账号" prop="userNumber">
                <el-input 
                type="number" 
                v-model="user.userNumber"
                placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input 
                type="password" 
                v-model="user.password"
                placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                type="primary"
                @click="submit('form')">
                登录
                </el-button>
            </el-form-item>
       </el-form>    
    </div>
</template>
<script>
export default {
     
    data(){
     
        return{
     
            user:{
     
                userNumber:'',
                password:''
            },
            rules:{
     
                userNumber: [{
     required: true, message: '请输入账号', trigger: 'blur'}],
                password: [{
     required: true, message: '请输入密码', trigger: 'blur'}],
            }
        }
    },
    methods:{
     
        submit(form) {
     
            this.$refs[form].validate((valid) => {
     
                if (valid) {
     
                    alert('submit!');
                } else {
     
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(form) {
     
            this.$refs[form].resetFields();
        }
    }   
}
</script>

如图：

3、其它参数

<template>
    <div>
        <!-- model  表单数据对象 -->
        <!-- rules  表单验证规则 -->
        <!-- label-position  right/left/top 改变表单域标签的位置    -->
        <!-- label-width  输入框和左边之间距离 -->
        <!-- status-icon  是否在输入框中显示校验结果反馈图标 -->
        <!-- inline   行内表单模式 -->
        <!-- size  medium / small / mini  控制该表单域下组件的尺寸 -->
        <el-form
        :model="user"
        :rules="rules"
        ref="form"
        label-position="left"
        label-width="50px"
        status-icon
        :inline="true"
        size="mini">
            <el-form-item label="账号" prop="userNumber">
                <el-input 
                type="number" 
                v-model="user.userNumber"
                placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input 
                type="password" 
                v-model="user.password"
                placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                type="primary"
                @click="submit('form')">
                登录
                </el-button>
            </el-form-item>
       </el-form>    
    </div>
</template>

如图：