element+vue项目自我总结在<el-form>中绑定:rules='loginFormRules',在data里

<el-input></el-input> Input输入框，prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标

在element项目中使用阿里图标

下载阿里图标到本地，生成fonts文件，将fonts文件放到assets文件夹下
在main.js文件下引入 import './assets/fonts/iconfont.css'
在需要使用的页面<div class='iconfint 阿里对应图标的类名'></div>

<el-form></el-form>实现绑定数据

   <el-form class="login-form" :model='loginModel'>       
      <el-form-item>       
        <el-input  v-model="loginModel.username" prefix-icon="el-icon-search"> </el-input>              
     </el-form-item>
   </el-form>
<script>
    data() {
        return{
             username:'',
      }
     }
</script>

<el-form></el-form>实现校验

在<el-form>中绑定:rules='loginFormRules',在data里面定义loginFormRules指定规则。在<el-form-item>里面通过prop绑定username对应的规则。

<el-form class="login-form" :model='loginModel' :rules='loginFormRules'>                <el-form-item prop='username'>                    <el-input  v-model="loginModel.username" prefix-icon="el-icon-search"></el-input>                </el-form-item>
</el-form>
<script>
   loginFormRules: {                username: [                    { required: true, message: '请输入登录名称', trigger: 'blur' },                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }                ]            }
</script>

<el-form></el-form>实现数据重置和登录前预验证

在form表单上绑定ref='loginForm'，绑定表单实例，在方法中通过this.$refs.loginForm.resetFields()触发重置方法。

   <el-form class="login-form" :model='loginModel'             :rules='loginFormRules' ref="loginForm">                <el-form-item prop='username'>                    <el-input  v-model="loginModel.username" prefix-icon="el-icon-search"></el-input>                </el-form-item>
</el-form>
<script>
    methods:{        resert() {            this.$refs.loginForm.resetFields();        },
     login() {            this.$refs.loginForm.validate((valid)=>{                console.log(valid)            })        }
</script>