element-ui-01

Posted 2020-12-14 a973692898

表单：

　  　确保element-ui引进引入，或者按需引入时，引入对应的组件

1.简单结构实例：

<el-form label-width=‘0px‘>
　　<el-form-item>
　　　　<el-input></el-input>
　　</el-form-item>
　　<el-form-item>
　　　　<el-button></el-button>
　　</el-form-item>
</el-form>

2.如何绑定form里面的数据呢？

　　主要分为3步：

　　　　1.在<el-form>标签中 使用  :model=‘loginForm’ 将fome绑定到loginForm对象中去

　　　　2.在data中创建loginForm对象

　　　　3.在对象的组件里面绑定loginForm里面的对象，如：<el-input  v-model=‘loginForm.username‘>

　　具体代码如下：

<el-form label-width=‘0px‘  :model="loginForm">
　　//用户名
　　<el-form-item>
　　　　<el-input v-model=‘loginFrom.username‘></el-input>
　　</el-form-item>
　　//密码
　　<el-form-item>
　　　　<el-input v-model=‘loginFrom.password‘></el-input>
　　</el-form-item>
　　<el-form-item>
　　　　<el-button></el-button>
　　</el-form-item>
</el-form>


data(){
　　return{
　　　　loginFrom:{
　　　　　　username:‘‘,
　　　　　　password:‘‘
　　　　　}
　　}
}

 

3.如何进行form表单校验

　　主要分为3步：

　　　　1.使用  :rules给form表单绑定验证属性

　　　　2.在data中声明loginFormRules属性，书写校验内容，如何触发等

　　　　3.在<el-form-item>中使用prop绑定在loginFormRules中声明的验证名，就可以使用表单验证了

　　具体代码如下：

<el-form label-width=‘0px‘  :model="loginForm" :rules="loginFormRules">
　　//用户名
　　<el-form-item prop=‘username‘>
　　　　<el-input v-model=‘loginFrom.username‘></el-input>
　　</el-form-item>
　　//密码
　　<el-form-item prop=‘password‘>
　　　　<el-input v-model=‘loginFrom.password‘></el-input>
　　</el-form-item>
　　<el-form-item>
　　　　<el-button></el-button>
　　</el-form-item>
</el-form>


data(){
　　return{
　　　　loginForm:{
　　　　　　username:‘‘,
　　　　　　password:‘‘
　　　　　},
　　　　loginFormRules:{
　　　　　　username:[
　　　　　　　　{ required: true, message: ‘请输入登录名称‘, trigger: ‘blur‘ },
　　　　　　　　{ min: 3, max: 8, message: ‘长度在 3 到 8 个字符‘, trigger: ‘blur‘ }
　　　　　　],
　　　　　　password:[
　　　　　　　　{ required: true, message: ‘请输入登录密码‘, trigger: ‘blur‘ },
　　　　　　　　{ min: 6, max: 15, message: ‘长度在 6 到 15 个字符‘, trigger: ‘blur‘ }
　　　　　　]
　　　　}

　　}
}