欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用element ui中el-table-column進(jìn)行自定義校驗(yàn)

 更新時間:2024年08月10日 09:49:50   作者:花村xld  
這篇文章主要介紹了使用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),希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue.js實(shí)現(xiàn)價格計算器功能

    Vue.js實(shí)現(xiàn)價格計算器功能

    這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)價格計算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • vue @click與@click.native,及vue事件機(jī)制的使用分析

    vue @click與@click.native,及vue事件機(jī)制的使用分析

    這篇文章主要介紹了vue @click與@click.native,及vue事件機(jī)制的使用分析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue自定義復(fù)制指令 v-copy功能的實(shí)現(xiàn)

    Vue自定義復(fù)制指令 v-copy功能的實(shí)現(xiàn)

    這篇文章主要介紹了Vue自定義復(fù)制指令 v-copy,使用自定義指令創(chuàng)建一個點(diǎn)擊復(fù)制文本功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-01-01
  • 一文搞懂Vue2中的組件通信

    一文搞懂Vue2中的組件通信

    這篇文章主要為大家介紹了Vue2中的組件通信方式,文中通過示例進(jìn)行了詳細(xì)的介紹,對我們學(xué)習(xí)Vue有一定的幫助,感興趣的小伙伴可以了解一下
    2022-07-07
  • Vue2/3?登錄后用戶無操作半小時后自動清除登錄信息退出登錄下線(示例代碼)

    Vue2/3?登錄后用戶無操作半小時后自動清除登錄信息退出登錄下線(示例代碼)

    這篇文章主要介紹了Vue2/3?登錄后用戶無操作半小時后自動清除登錄信息退出登錄下線,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2024-07-07
  • vue3+vant4封裝日期時間組件方式(年月日時分秒)

    vue3+vant4封裝日期時間組件方式(年月日時分秒)

    這篇文章主要介紹了vue3+vant4封裝日期時間組件方式(年月日時分秒),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue實(shí)現(xiàn)Base64編碼與解碼的代碼示例

    Vue實(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-09
  • Vue如何由本地js中存放的url地址獲取圖片

    Vue如何由本地js中存放的url地址獲取圖片

    這篇文章主要介紹了Vue如何由本地js中存放的url地址獲取圖片問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • vue3?reactive響應(yīng)式依賴收集派發(fā)更新原理解析

    vue3?reactive響應(yīng)式依賴收集派發(fā)更新原理解析

    這篇文章主要為大家介紹了vue3響應(yīng)式reactive依賴收集派發(fā)更新原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • Vue3導(dǎo)航欄組件封裝實(shí)現(xiàn)方法

    Vue3導(dǎo)航欄組件封裝實(shí)現(xiàn)方法

    這篇文章主要為大家詳細(xì)介紹了Vue3導(dǎo)航欄組件封裝的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09

最新評論