Element ui

https://element.eleme.cn/#/zh-CN官网

一、安装

npm install element-ui --save

二、全局引入、使用（也可按需引入，参考官网）

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';  //需单独引入样式
Vue.use(ElementUI);

总结：

1.只需要写一个此标签

<el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline">
     <el-form-item label="审批人">
           <el-input v-model="formInline.user" placeholder="审批人"></el-input>
     </el-form-item>
     //可一直复制el-form-item标签
     <el-form-item label="审批人">
           <el-input v-model="formInline.user" placeholder="审批人"></el-input>
     </el-form-item>
</el-form>

注：修改样式时要写到根组建里，做全局样式

复制<scrpit></script>的所有内容

2.关于验证

在数据里面写data

<el-form :model="data"></el-form>    //所有数据都来自data

//在data的ruturn中写
data: {
              huiyuanid: '',
              password:'',
              name:'',
}

写rules校验规则

<el-form :rules="rules"></el-form>   //所有的验证都写入rules

如果会员编号需验证，则在el-form-item标签中写prop，然后在el-input中传入所需数据，在写rules验证

<el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline">
                <div class="Table-2">
                    <p>如果您是贵宾金环会会员，请使用贵宾金环会会籍编号/电子邮件及密码登陆</p>
                    <!-- element ui组件 --> 
                        <el-form-item  style="width: 50%" prop="huiyuanid">
                            <span>会籍编号:*</span>
                            <el-input v-model="formInline.huiyuanid"></el-input>
                        </el-form-item>
                        <el-form-item  prop="password">
                            <span>密码:*</span>
                            <el-input type="password" v-model="formInline.password"></el-input>
                            <span style="color:#6a4800">忘记密码</span>
                        </el-form-item>    
                </div>
</el-form>

 rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },   //required: true,必填项，不为空
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
        }

3.自定义校验规则

4.提交按钮验证

首先用ref命名

<el-form ref="data"></el-form>   //data就是放所有数据的

使用element ui 的提交按钮（绑定点击事件，写方法，传参）

//onSubmit方法传参data（data就是放所有数据的）
<el-form-item>
      <el-button type="primary" @click="onSubmit('data')">立即预定</el-button>
</el-form-item>

methods: {
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                     if (valid) {
                       alert('submit!');
                     } else {
                       console.log('error submit!!');
                       return false;
                     }
                   });
            }
        }