Element-ui（更新中表單最詳細的解釋）

天蠍座的程式設計師發表於2020-12-15
UI

基本用法

  1. 初始化專案
vue create element-test
  1. 安裝
  npm i element-ui -S
  1. Vue 外掛
+ import ElementUI from 'element-ui'
+ Vue.use(ElementUI)
  1. 引入樣式
  import 'element-ui/lib/theme-chalk/index.css'
  1. element-ui 案例
    Message 訊息提示
    常用於主動操作後的反饋提示。與 Notification 的區別是後者更多用於系統級通知的被動提醒。
    https://element.eleme.cn/#/zh-CN/component/message#fang-fa

按需載入

對專案進行打包：
npm run build
發現vendors庫高達789KB
-rw-r–r-- 1sam staff 789518 10 27 20:40 chunk-vondors.cd583f5b.js
這是由於我們未使用按需載入，所以對element-ui進行全量打包的結果，按需載入的用法如下：

1. 安裝babel-plugin-component
    npm install babel-plugin-component -D
2. 修改 babel.config.js:
        module.exports = {
            presets: [
                '@vue/cli-plugin-babel/preset'
            ],
            "plugins": [
                "component",
                {
                "libraryName":"element-ui", //第一步是指定我們按需載入的名稱是element-ui
                "styleLibraryName":"theme-chalk" //指定樣式庫
                }
            ]
        }

main.js

import Vue from 'vue'
import App from './App.vue'
// import ElementUI from 'element-ui' //引入element
import { button, Message } from 'element-ui' //按需載入後換方式
// import 'element-ui/lib/theme-chalk/index.css'//引入element樣式  按需載入後不要了

// Vue.use(ElementUI) //使用element 按需載入後換方式
Vue.component(Button.name,Button) //Vue.component有倆個引數第一個是元件名稱 第二個是建構函式
Vue.prototype.$message = Message //在原型上加一個message方法
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Mixed spaces and tabs no-mixed-spaces-and-tabs混合空格和製表符

翻譯：混合空格和製表符沒有混合空格和製表符
原因：這一段空白裡既有tab鍵按出的空格，又有空格鍵按出的空格
解決：把這段空白刪掉，全部用tab鍵或全部用空格鍵

/* eslint-disable*/

禁制ellint報錯

外掛引用（推薦使用）

可以通過element外掛快速整合 element-ui

vue add element //對element做了一個簡單初始化

表單基本用法

  1. el-form容器，通過 model 繫結資料
  2. el-form-item 容器，通過 label 繫結標籤
  3. 表單元件通過 v-model 繫結 medel 中的資料
<template>
	<div id="app">
		<el-form :inline="true" :model="data"> //inline排成一行
  <el-form-item label="審批人">
    <el-input v-model="data.user" placeholder="審批人"></el-input>
  </el-form-item>
  <el-form-item label="活動區域">
    <el-select v-model="data.region" placeholder="活動區域">
      <el-option label="區域一" value="shanghai"></el-option>
      <el-option label="區域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查詢</el-button>
  </el-form-item>
</el-form>
	</div>
</template>


<script>
  export default {
    data() {
      return {
        data: {
        	user:'sam',
        	region:'區域二'
        }
      }
    },
    methods: {
      onSubmit() {
        console.log(this.data);
      }
    }
  }
</script>

表單的校驗

  1. 定義校驗規則，可以繫結到 el-form 或 el-form-item
export default {
    data() {
      const userValidator = (rule,value,callback) => {
        if (value.leng >3) {
          callback()
        }else {
          callback(new Error('使用者名稱長度必須大於3'))
        }
      }
      return {
        data : {
          user :'sam',
          region:'區域二'
        },
        rules: {
          user: [
            { required:true,trigger:'change',message:'使用者名稱必須錄用' },
            { validator: userValidator,trigger:'change' }
          ]
        }
      }
    }
  }

兩種方法 （非空校驗）

  • 第一種方法繫結rules來做自動的監聽
// el-form 提供了一個rules屬性
<el-form :inline="true" :model="data" :rules="rules" ref="form">
 <el-form-item label="審批人" prop="user">
 rules: {
 			// user裡可以是陣列也可以是物件，陣列代表有多條校驗項
          user: [ //與data裡的user無關 與 el-form-item 的 prop 屬性一一對應 就會找prop為user的表單項裡面的內容，會直接去v-model裡面的內容進行校驗
          // 必須輸入	change當文字傳送變化觸發/blur輸出時不會觸發當移除輸入框就會觸發  	提示資訊
            { required:true,trigger:'change',message:'使用者名稱必須錄用' },
            // 手動校驗 validator 需要繫結到一個方法
            { validator: userValidator,trigger:'change' }
          ]
        }
        // 觸發校驗規則會有3個引數，第一個引數是當前的校驗規則，第二個是value就是我們輸入的值
		const userValidator = (rule,value,callback) => {
        if (value.leng >3) {
          callback()	// 當leng大於3的時候呼叫callback（）表示通過
        }else {
          callback(new Error('使用者名稱長度必須大於3'))
        }
  • 第二種方法通過ref繫結form的物件上，通過直接呼叫el-form的api：validate來實現手動的校驗
<el-form :inline="true" :model="data" :rules="rules" ref="form">
 onSubmit() {
        console.log(this.data);
        this.$refs.form.validate((isValid,errors) => {
          console.log(isValid,errors)
        })
      }

推薦兩種一起使用

<template>
	<div id="app">
		<el-form :inline="true" :model="data" :rules="rules" ref="form">
  <el-form-item label="審批人" prop="user">
    <el-input v-model="data.user" placeholder="審批人"></el-input>
  </el-form-item>
  <el-form-item label="活動區域">
    <el-select v-model="data.region" placeholder="活動區域">
      <el-option label="區域一" value="shanghai"></el-option>
      <el-option label="區域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查詢</el-button>
  </el-form-item>
</el-form>
	</div>
</template>


<script>
export default {
    data() {
      const userValidator = (rule,value,callback) => {
        if (value.leng >3) {
          callback()
        }else {
          callback(new Error('使用者名稱長度必須大於3'))
        }
      }
      return {
        data : {
          user :'',
          region:''
        },
        rules: {
          user: [
            { required:true,trigger:'change',message:'使用者名稱必須錄用' },
            { validator: userValidator,trigger:'change' }
          ]
        }
      }
    },
    methods: {
      /* eslint-disable */
      onSubmit() {
        console.log(this.data);
        this.$refs.form.validate((isValid,errors) => {
          console.log(isValid,errors)
        })
      }
    }
  }
</script>

表單校驗的高階用法

用法一： 動態改變校驗規則
  1. rules 只包含一個校驗規則
{
	rules： {
		user: [
			{ required : true,trigger: 'change',message:'使用者名稱必須錄用' }
		]
	}
}
  1. 動態新增 rules
addRule() {
        const userValidator = (rule,value,callback) => {
          if (value.length > 3) {
            this.inputError = ''
            this.inputValidateStatus = ''
            callback()
          } else {
            callback(new Error('使用者名稱長度必須大於3'))
          }
        }
        //他會動態的將我們倆個校驗規則拼起來，拼起來之後會去改變rules
        const newRule = [
          ...this.rules.user,
          { validator: userValidator,trigger: 'change' }
        ]
        // 一定要使用Object.assign重新生成一個物件，將新的物件賦值給rules
        this.rules = Object.assign({},this.rules, { user : newRule })
      }

validate-on-rule-change

當我們新增校驗規則他會預設立即做一個校驗
加上validate-on-rule-change這個屬性當rules中發生變化時他會立即做一次校驗
：validate-on-rule-change="false"我們新增新的屬性時不會立即校驗

this.rules

//this.rules 必須要使用新物件複製的方法，因為在實現過程中el-form是用wacth監聽這個this.rules發生變化
this.rules = Object.assign({},this.rules, { user : newRule })


//錯誤示範
//如果你這樣寫把你新的規則push進去的話，是不會產生效果的，因為watch是監聽不到this.rules下面user的變化的，他只能監聽rules本身的變化
this.rules.user.push（newRule）
用法二：手動控制校驗狀態

validate-status：驗證狀態，列舉值，共四種：
success：驗證成功
error：驗證失敗
validating：驗證中
（空）：未驗證
error：這隊友錯誤提示

  1. 設定el-form-item 屬性
<el-form=item
	label="使用者名稱"
	prop="user"
	:error="error"
	:validate-status="status"
>
<!-- ... -->
</el=form-item>

//第一步要建立兩個狀態於data平級
 		error:'',
        status:'',
        data : {
          user :'',
          region:'',
        
        }
//第二不在el-form-item下增加兩個狀態繫結 
//:validate-status="status" //表示當前的驗證狀態，改變validate-status的值就會變成不同狀態（上面有）
//error //自定義錯誤 如果驗證失敗error裡有文字的話就會顯示出來
// 要想看出這一步的效果，我們就要加一個status-icon （下面演示）
<el-form-item label="審批人" prop="user" :validate-status="status" status-icon:error="error">

status-icon

status-icon 對我們校驗過程中加一些圖示的提示

正確的
錯誤的

  1. 自定義 status 和 error
showError () {
	this.status = 'error'
	this.error = '使用者名稱輸入有誤'
},
showSuccess () {
	this.status = 'success'
	this.error = ''
},
showValidating () {
	this.status = 'va;odating'
	this.error = ''
}

全文

<template>
  <div id="app">
    <el-form
      :inline="true"
      :model="data"
      :rules="rules"
      ref="form"
      validate-on-rule-change
      status-icon
    >
      <el-form-item
        label="審批人"
        prop="user"
        :validate-status="status"
        :error="error"
      >
        <el-input v-model="data.user" placeholder="審批人"></el-input>
      </el-form-item>
      <el-form-item label="活動區域">
        <el-select v-model="data.region" placeholder="活動區域">
          <el-option label="區域一" value="shanghai"></el-option>
          <el-option label="區域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查詢</el-button>
        <el-button type="success" @click="showSuccess">成功校驗</el-button>
        <el-button type="danger" @click="showError">失敗校驗</el-button>
        <el-button type="warning" @click="showValidating">校驗中</el-button>
        <el-button type="primary" @click="addRule">新增校驗規則</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
export default {
  data() {
    return {
      error: "這是一個自定義的錯誤",
      status: "error",
      data: {
        user: "",
        region: "",
      },
      rules: {
        user: [
          { required: true, trigger: "change", message: "使用者名稱必須錄用" },
        ],
      },
    };
  },
  methods: {
    /* eslint-disable */
    onSubmit() {
      console.log(this.data);
      this.$refs.form.validate((isValid, errors) => {
        console.log(isValid, errors);
      });
    },
    addRule() {
      const userValidator = (rule, value, callback) => {
        if (value.length > 3) {
          callback();
        } else {
          callback(new Error("使用者名稱長度必須大於3"));
        }
      };
      const newRule = [
        ...this.rules.user,
        { validator: userValidator, trigger: "change" },
      ];
      this.rules = Object.assign({}, this.rules, { user: newRule });
    },
    showError() {
      this.status = "error";
      this.error = "使用者名稱輸入有誤";
    },
    showSuccess() {
      this.status = "success";
      this.error = "";
    },
    showValidating() {
      this.status = "va;odating";
      this.error = "";
    },
  },
};
</script>

相關文章