element-ui学习笔记（3）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天,点击查看活动详情 >>

7.注意:在elementui中所有组件 都存在 属性 事件 和方法

属性:直接写在对应的组件标签上 使用方式:属性名=属性值方式

事件: 直接使用vue绑定事件方式写在对应的组件标签上 使用方式:@事件名=vue中事件处理函数

方法: 1.在对应组件标签上使用ref=组件别名 2.通过使用this.$refs.组件别名.方法名()进行调用

8. Form组件

1.组件的创建

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  ......
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
    export default {
        name: "Form",
        data() {
            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>

2.内联表单

<el-form :inline="true" :model="formInline" class="demo-form-inline">
		.......
</el-form>

通过设置 inline=true方式将表单作为内联表单处理

3.表单验证

• 使用说明:

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

3.1 失去焦点自动验证

<el-form :rules="rules" ...>
  <el-form-item label="活动名称" prop="name">
      <el-input v-model="form.name"></el-input>
  </el-form-item>
  ....
</el-form>
<script>
    export default {
        name: "Form",
        data() {
            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>

3.2 表单提交调用表单组件的验证方法验证

<el-form :rules="rules".... ref="form" >
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="form.name"></el-input>
  	</el-form-item>
  	<el-form-item>
      <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
      <el-button>取消</el-button>
  	</el-form-item>
</el-form>
...
methods: {
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                        //发送异步请求 到 springboot项目
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }

4.自定义表单的验证规则

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
  <el-form-item label="手机号" prop="phone">
    <el-input type="password" v-model="ruleForm.phone" ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

<script>
    export default {
        name: "Form",
        data() {
            let validatePhone = (rule,value,callback)=>{ //定义自定义的验证规则
                console.log(rule);
                console.log(value);
                console.log(callback);
                if(!value){
                    callback(new Error("手机号不能为空!"));
                }
                if(!/^1[3456789]\d{9}$/.test(value)){
                    callback(new Error("手机号码不正确!!"))
                }
            }
            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                rules: { //验证规则
                    name: [ //使用默认规则
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    phone:[  //使用自定义规则
                        {validator:validatePhone,trigger: 'blur'}
                    ]
                },
                ruleForm:{
                    phone:'',
                },
            }
        },
        methods: {
           
        }
    }
</script>

消息提示/table组件参考官方文档即可