使用element ui中el-table-column進(jìn)行自定義校驗(yàn)
element ui中el-table-column進(jìn)行自定義校驗(yàn)
最近在工作中遇到了這個需求點(diǎn)擊確定時要將表格中的輸入框經(jīng)行校驗(yàn),記錄一下方便以后復(fù)用。
有兩種方式:
第一種是提示的方式
效果:輸入框?yàn)榭盏臅r候:
效果:點(diǎn)擊確定是進(jìn)行校驗(yàn):
效果:
代碼的思路是這樣的:
data中需要定義一個用來標(biāo)記的變量,名字是隨便起的.
data(){ return:{ value:'' } }
下一步是在點(diǎn)擊確定時:對表格數(shù)組進(jìn)行循環(huán)并判斷每一項(xiàng)是否為空,只要有一個為空就提示,并this.value++;沒有為空的時候,就將this.value置空。
list.forEach((item,index)=>{ if (item.'什么什么什么' === '' ||){ ElMessage({ showClose: true, message: `提示:下列第 ${index+1} 行 請補(bǔ)充完整`, type: 'warning', }) this.value ++; }else { this.value = 0; } }) if (this.value === 0) { 'value等于0就表示數(shù)組中沒有為空的了' }
第二種方式要比第一種更準(zhǔn)確一點(diǎn)
效果:驗(yàn)證
源碼奉上:
<template> <div> <el-table :data="people" style="width: 100%"> <el-table-column prop="name" label="Name"> <template #default="{ row }"> <el-input v-model="row.name" @blur="validateName(row)" /> <span v-if="row.nameError" class="error">{{ row.nameError }}</span> </template> </el-table-column> <el-table-column prop="age" label="Age"> <template #default="{ row }"> <el-input-number v-model="row.age" @change="validateAge(row)" :min="0" :max="150" /> <span v-if="row.ageError" class="error">{{ row.ageError }}</span> </template> </el-table-column> </el-table> <el-button type="primary" @click="validateForm">確定</el-button> </div> </template>
<script> import { ref } from 'vue'; export default { setup() { const people = ref([ { name: "", age: "", nameError: "", ageError: "" }, { name: "", age: "", nameError: "", ageError: "" }, { name: "", age: "", nameError: "", ageError: "" } ]); const validateName = (person) => { if (!person.name) { person.nameError = "Name is required."; } else { person.nameError = ""; } }; const validateAge = (person) => { if (!person.age) { person.ageError = "Age is required."; } else if (person.age < 0 || person.age > 150) { person.ageError = "Age must be between 0 and 150."; } else { person.ageError = ""; } }; const validateForm = () => { let isValid = true; for (let person of people.value) { validateName(person); validateAge(person); if (person.nameError || person.ageError) { isValid = false; } } if (isValid) { // 執(zhí)行提交表單的操作 console.log("表單校驗(yàn)通過,執(zhí)行提交操作"); } else { console.log("表單校驗(yàn)未通過"); } }; return { people, validateName, validateAge, validateForm }; } }; </script>
<style> .error { color: red; } </style>
有需求可以試試.
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
- vue如何使用element ui表格el-table-column在里面做判斷
- el-table-column疊加el-popover使用示例小結(jié)
- Vue+ElementUI踩坑之動態(tài)顯示/隱藏表格的列el-table-column問題
- Vue element el-table-column中對日期進(jìn)行格式化方式(全局過濾器)
- vue中如何給el-table-column添加指定列的點(diǎn)擊事件
- 關(guān)于el-table-column的formatter的使用及說明
- el-table-column 內(nèi)容不自動換行的解決方法
- vue中el-table格式化el-table-column內(nèi)容的三種方法
- el-table el-table-column表頭嵌套循環(huán)數(shù)據(jù)的示例代碼
相關(guān)文章
vue @click與@click.native,及vue事件機(jī)制的使用分析
這篇文章主要介紹了vue @click與@click.native,及vue事件機(jī)制的使用分析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue自定義復(fù)制指令 v-copy功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue自定義復(fù)制指令 v-copy,使用自定義指令創(chuàng)建一個點(diǎn)擊復(fù)制文本功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-01-01Vue2/3?登錄后用戶無操作半小時后自動清除登錄信息退出登錄下線(示例代碼)
這篇文章主要介紹了Vue2/3?登錄后用戶無操作半小時后自動清除登錄信息退出登錄下線,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07Vue實(shí)現(xiàn)Base64編碼與解碼的代碼示例
在Web開發(fā)中,Base64編碼常用于將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為文本字符串,以便在網(wǎng)絡(luò)上傳輸,在Vue.js應(yīng)用中,Base64編碼廣泛應(yīng)用于圖像的嵌入,本文將詳細(xì)介紹如何在Vue.js中實(shí)現(xiàn)Base64編碼與解碼,并提供多種示例和實(shí)現(xiàn)思路,需要的朋友可以參考下2024-09-09vue3?reactive響應(yīng)式依賴收集派發(fā)更新原理解析
這篇文章主要為大家介紹了vue3響應(yīng)式reactive依賴收集派發(fā)更新原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03Vue3導(dǎo)航欄組件封裝實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Vue3導(dǎo)航欄組件封裝的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09