您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)利用element怎么實(shí)現(xiàn)一個(gè)區(qū)間選擇組件,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
分為左右值,包含左右值,正整數(shù)
左側(cè)必須大于等于1,右側(cè)無限大,右側(cè)值必須不小于左側(cè)
左側(cè)填寫數(shù)據(jù),右側(cè)標(biāo)為必填;右側(cè)填寫數(shù)據(jù),左側(cè)標(biāo)為必填
失焦校驗(yàn)成果:
代碼如下:(頁面)
<el-col :span="8" v-if="item.qttccType === 1"> <el-col :span="14"> <el-form-item :label="item.qttccName" :prop="'list.'+ index + '.startNum'" :rules="item.qttccName === '交易金額' ? startMoneyRule(tIndex) : []"> <el-input v-model.number="item.qttcStartNum" @change="handleMinChange(index)"></el-input> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="~" label-width="10px" :prop="'list.'+ index + '.qttcEndNum'" :rules="item.qttccName === '交易金額' ? endMoneyRule(tIndex) : []"> <el-input v-model.number="item.qttcEndNum" @change="handleMaxChange(index)"></el-input> </el-form-item> </el-col> </el-col>
單個(gè)表單校驗(yàn):左側(cè)填寫數(shù)據(jù),右側(cè)標(biāo)為必填;右側(cè)填寫數(shù)據(jù),左側(cè)標(biāo)為必填、正整數(shù)校驗(yàn)、區(qū)間校驗(yàn)
關(guān)聯(lián)校驗(yàn):右側(cè)閾值不得小于左側(cè)閾值
根據(jù)上面的思路,單個(gè)表單的校驗(yàn)屬于公共校驗(yàn)方法,關(guān)聯(lián)校驗(yàn)需要分別校驗(yàn)(因?yàn)閷Ρ葘ο蟛煌?,且提示語不同),由此在自定義校驗(yàn)中有了如下定義:
公共校驗(yàn)方法:正整數(shù)校驗(yàn)、區(qū)間校驗(yàn)
validateCom(rule, value, callback) { const MIN_NUMBER = 1 const one = Number(value) if (Number.isInteger(one)) { if (one < MIN_NUMBER) { return callback(new Error('輸入值必須大于0')) } else if (one.length > 50) { callback(new Error('最大長度為50位')) } return callback() } return callback(new Error('請輸入數(shù)字值')) }
關(guān)聯(lián)校驗(yàn):
startMoneyRule(index) { const validateMin = (rule, value, callback) => { const one = Number(value) const max = Number(this.form.list[index].qttcEndNum) if (!max || one < max) { return callback() } return callback(new Error('輸入值不得大于最大閾值')) } const R = [] R.push({ required: false, message: '請?zhí)顚懡灰捉痤~最小值', trigger: 'blur' }, { validator: this.validateCom, trigger: 'blur' }, { validator: validateMin, trigger: 'blur' }) return R }, endMoneyRule(index) { const validateMax = (rule, value, callback) => { const one = Number(value) const min = Number(this.form.list[index].qttcStartNum) if (!min || one > min) { return callback() } return callback(new Error('輸入值不得小于最小閾值')) } const R = [] R.push({ required: false, message: '請?zhí)顚懡灰捉痤~最大值', trigger: 'blur' }, { validator: this.validateCom, trigger: 'blur' }, { validator: validateMax, trigger: 'blur' }) return R }
很顯然,左側(cè)值是小于右側(cè)值的,但是校驗(yàn)提示仍然報(bào)錯(cuò)。究其原因,還是關(guān)聯(lián)校驗(yàn)的問題。既然是關(guān)聯(lián)交驗(yàn),改變其中一個(gè)時(shí)應(yīng)該會(huì)重新校驗(yàn)兩個(gè)。很簡單,在input改變時(shí),重新校驗(yàn)表單不就OK了嗎
handleMinChange(index) { this.$refs.form.validateField('list.' + index + '.qttcEndNum') }, handleMaxChange(index) { this.$refs.form.validateField('list.' + index + '.qttcStartNum') }
以上就是利用element怎么實(shí)現(xiàn)一個(gè)區(qū)間選擇組件,小編相信有部分知識點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。