ele学习 表单

简单例子

这里使用v-bind 绑定一个model属性,使得表单的数据易于集体管理

<template>
    <div class="form">
       <el-form :model="form">
         <el-form-item label="活动名称">
           <el-input v-model="form.name"></el-input>
         </el-form-item>
       </el-form>
    </div>
</template>
<script>
    export default {
        name: "Form",
        data(){
          return {
            form : {
              name : 's'
            }
          }
        }
  }
</script>
<style>
</style>

效果:

设置inline为true可以使得表单更紧凑
效果：

表单验证

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
简单例子:

<template>
    <div class="form">
       <el-form :model="form" :rules="rules" :inline="true" ref="form">
         <el-form-item label="活动名称" prop="name">
           <el-input v-model="form.name"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button @click="Submit('form')">提交</el-button>
       </el-form-item>
       </el-form>
    </div>
</template>
<script>
    export default {
        name: "Form",
        data(){
          return {
            form : {
              name : ''
            },
            rules:{
              name:[
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
              ]
            }
          }
        },
        methods :{
          Submit(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
        });
          }
        }
  }
</script>
<style>
</style>

效果