element中el-table中的el-input校驗的實現(xiàn)
本文主要介紹了element中el-table中的el-input校驗的實現(xiàn),具體如下:
<el-form ? ? ? ? ? ? :model="formParams" ? ? ? ? ? ? :rules="rules" ? ? ? ? ? ? ref="ruleForm" ? ? ? ? ? ? label-width="0"> ? ? ? ? ? ? <el-tabs v-model="activeName" type="card" @tab-click="changeTab"> ? ? ? ? ? ? ? <el-tab-pane v-for="item in tabList" :name="item.name" :key="item.id"> ? ? ? ? ? ? ? ? <div slot="label"> ? ? ? ? ? ? ? ? ?{{item.name}}({{totalCount[item.name] || 0}}) ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? <el-table ? ? ? ? ? ? ? ? ? v-show="activeName==='xxx'" ? ? ? ? ? ? ? ? ? :row-class-name="tableRowClass" ? ? ? ? ? ? ? ? ? :data="formParams.xxxData" ? ? ? ? ? ? ? ? ? border> ? ? ? ? ? ? ? ? ? <el-table-column ? ? ? ? ? ? ? ? ? ? min-width="10%" ? ? ? ? ? ? ? ? ? ? prop="num" ? ? ? ? ? ? ? ? ? ? label="數(shù)量"> ? ? ? ? ? ? ? ? ? ? <template slot-scope="scope"> ? ? ? ? ? ? ? ? ? ? ? <el-form-item :prop="'xxxData.' + scope.$index + '.num'" :rules="rules.num"> ? ? ? ? ? ? ? ? ? ? ? ? <el-input v-model="scope.row.num" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? maxlength="6" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? @input="value => scope.row.num= Number(value.replace(/[^\d]/g,''))" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? size="small"></el-input> ? ? ? ? ? ? ? ? ? ? ? </el-form-item> ? ? ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? ? ? ? </el-table-column> ? ? ? ? ? ? ? ? ? <el-table-column ? ? ? ? ? ? ? ? ? ? min-width="20%" ? ? ? ? ? ? ? ? ? ? label="時間"> ? ? ? ? ? ? ? ? ? ? <template slot-scope="scope"> ? ? ? ? ? ? ? ? ? ? ? <el-time-picker ? ? ? ? ? ? ? ? ? ? ? ? style="width: 45%" ? ? ? ? ? ? ? ? ? ? ? ? v-model="scope.row.startTime" ? ? ? ? ? ? ? ? ? ? ? ? value-format="HH:mm:ss" ? ? ? ? ? ? ? ? ? ? ? ? :picker-options="{ ? ? ? ? ? ? ? ? ? ? ? ? ? selectableRange: '00:00:00 - 12:59:59' ? ? ? ? ? ? ? ? ? ? ? ? }" ? ? ? ? ? ? ? ? ? ? ? ? size="small" ? ? ? ? ? ? ? ? ? ? ? ? placeholder="開始時間"> ? ? ? ? ? ? ? ? ? ? ? </el-time-picker> - ? ? ? ? ? ? ? ? ? ? ? <el-time-picker ? ? ? ? ? ? ? ? ? ? ? ? style="width: 45%" ? ? ? ? ? ? ? ? ? ? ? ? v-model="scope.row.endTime" ? ? ? ? ? ? ? ? ? ? ? ? value-format="HH:mm:ss" ? ? ? ? ? ? ? ? ? ? ? ? :picker-options="{ ? ? ? ? ? ? ? ? ? ? ? ? ? selectableRange: `${scope.row.startTime ? scope.row.startTime : '00:00:00'}-12:59:59`, ? ? ? ? ? ? ? ? ? ? ? ? }" ? ? ? ? ? ? ? ? ? ? ? ? size="small" ? ? ? ? ? ? ? ? ? ? ? ? placeholder="結束時間"> ? ? ? ? ? ? ? ? ? ? ? </el-time-picker> ? ? ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? ? ? ? </el-table-column> ? ? ? ? ? ? ? ? ? <el-table-column ? ? ? ? ? ? ? ? ? ? min-width="10%" ? ? ? ? ? ? ? ? ? ? label="操作"> ? ? ? ? ? ? ? ? ? ? <template slot-scope="scope"> ? ? ? ? ? ? ? ? ? ? ? <a ?@click="delete(scope.$index)">刪除</a> ? ? ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? ? ? ? </el-table-column> ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? </el-table> ? ? ? ? ? ? ? </el-tab-pane> ? ? ? ? ? ? </el-tabs> ? ? ? ? ? </el-form>
1. 點擊保存的時候校驗num
data() { return { num: [ { required: true, message: '請輸入數(shù)量', trigger: 'change' }, ] } }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert("submit!"); } else { return false; } }); } }
2. 由于每個tab頁對應展示不同的數(shù)據(jù)列表,并且每個列表可以添加一條新的數(shù)據(jù),如果想在保存時提示具體信息,如果"xxx的數(shù)量不能為空",“yyy的數(shù)量不能為空”,可以在點擊保存時對不同的數(shù)據(jù)列表進行循環(huán)
this.validateNum(this.formParams.xxxData, 'xxx'); this.validateNum(this.formParams.yyyData, 'yyy'); validateNum(list, msg) { ? ? ? if (list && list.length && list.findIndex(item => item.num === '') !== -1) { ? ? ? ? this.tips.push(msg); ? ? ? } ? ? } if (this.tips.length) { ? ? ? ? message += `${this.tips.join('、')}的數(shù)量不能為空;`; ?}
3. 如果把<el-form>放在<el-tab>循環(huán)里面,在v-for循環(huán)中使用form表單驗證this.$refs[formName].validate會出現(xiàn)錯誤TypeError: this.$refs[formName].validate is not a function:
由于this.$refs[formName]是一個數(shù)組,使用this.$refs[formName][0].validate((valid) => {}
4. time-picker中想要設置結束時間大于開始時間
selectableRange: `${scope.row.startTime ? scope.row.startTime : '00:00:00'}-12:59:59`
5. 給el-table中的指定行指定特殊的樣式
tableRowClass(val) { if (val.row.type === 'xxxxxx') { return 'row-disable'; } else { return ''; } }
6. el-input中限制只能輸入數(shù)字
<el-input v-model="count" @input="value => count = Number(value.replace(/[^\d]/g,''))" </el-input>
到此這篇關于element中el-table中的el-input校驗的實現(xiàn)的文章就介紹到這了,更多相關el-table中的el-input校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
electron-vue?項目添加啟動loading動畫的實現(xiàn)思路
electron-vue腳手架搭建的項目,在開發(fā)階段可能你注意不到項目啟動慢的問題,但是在build?生成的exe可執(zhí)行文件,啟動后,要反應很久才能進入到app.vue?中加載的頁面,體驗性很差,本文給大家介紹electron?vue啟動動畫效果的實例代碼,感興趣的朋友一起看看吧2022-01-01