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;
                     }
                   });
            }
        }