使用element ui中el-table-column進(jìn)行自定義校驗(yàn)
element ui中el-table-column進(jìn)行自定義校驗(yàn)
最近在工作中遇到了這個需求點(diǎn)擊確定時(shí)要將表格中的輸入框經(jīng)行校驗(yàn),記錄一下方便以后復(fù)用。
有兩種方式:
第一種是提示的方式
效果:輸入框?yàn)榭盏臅r(shí)候:

效果:點(diǎn)擊確定是進(jìn)行校驗(yàn):

效果:

代碼的思路是這樣的:
data中需要定義一個用來標(biāo)記的變量,名字是隨便起的.
data(){
return:{
value:''
}
}下一步是在點(diǎn)擊確定時(shí):對表格數(shù)組進(jìn)行循環(huán)并判斷每一項(xiàng)是否為空,只要有一個為空就提示,并this.value++;沒有為空的時(shí)候,就將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+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站
需要實(shí)現(xiàn)一個輪播圖,輪播內(nèi)容是不同的網(wǎng)站,并實(shí)現(xiàn)鼠標(biāo)滑動時(shí)停止輪播,當(dāng)鼠標(biāo)10秒內(nèi)不動時(shí)繼續(xù)輪播,所以本文給大家介紹了用vue+ElementUi+iframe實(shí)現(xiàn)輪播不同的網(wǎng)站,需要的朋友可以參考下2024-02-02
vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實(shí)現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁面-計(jì)算頁面尺寸
這篇文章主要介紹了Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁面-計(jì)算頁面尺寸,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09
uniapp-vue3-彈出選擇組件wo-pop-selector使用示例
wo-pop-selector彈出選擇組件采用uniapp-vue3實(shí)現(xiàn), 支持H5、微信小程序,本文給大家介紹uniapp-vue3-彈出選擇組件wo-pop-selector及使用示例,感興趣的朋友一起看看吧2023-10-10
Vue3項(xiàng)目實(shí)現(xiàn)前端導(dǎo)出Excel的示例代碼
這篇文章主要介紹了Vue3項(xiàng)目實(shí)現(xiàn)前端導(dǎo)出Excel的示例,在vue3的項(xiàng)目中導(dǎo)出Excel表格的功能,可以借助xlsx庫來實(shí)現(xiàn),下面是詳細(xì)的操作步驟,需要的朋友可以參考下2025-01-01
如何利用vue3實(shí)現(xiàn)放大鏡效果實(shí)例詳解
最近有項(xiàng)目需要用到對圖片進(jìn)行局部放大,類似淘寶商品頁的放大鏡效果,經(jīng)過一番研究功能可用,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實(shí)現(xiàn)放大鏡效果的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue-video-player 通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果【推薦】
這篇文章主要介紹了vue-video-player,通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08

