使用element ui中el-table-column进行自定义校验

 更新时间:2024年08月10日 09:49:50   作者:花村xld  
这篇文章主要介绍了使用element ui中el-table-column进行自定义校验方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

element ui中el-table-column进行自定义校验

最近在工作中遇到了这个需求点击确定时要将表格中的输入框经行校验,记录一下方便以后复用。

有两种方式:

第一种是提示的方式

效果:输入框为空的时候:

效果:点击确定是进行校验:

效果:

代码的思路是这样的:

data中需要定义一个用来标记的变量,名字是随便起的.

data(){
    return:{
        value:''
    }
}

下一步是在点击确定时:对表格数组进行循环并判断每一项是否为空,只要有一个为空就提示,并this.value++;没有为空的时候,就将this.value置空。

list.forEach((item,index)=>{
			  if (item.'什么什么什么' === '' ||){
				  ElMessage({
					  showClose: true,
					  message: `提示:下列第 ${index+1} 行 请补充完整`,
					  type: 'warning',
				  })
				  this.value ++;
			  }else {
				  this.value = 0;
			  }
})
if (this.value === 0)	{
    'value等于0就表示数组中没有为空的了'
}

第二种方式要比第一种更准确一点

效果:验证

源码奉上:

<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) {
        // 执行提交表单的操作
        console.log("表单校验通过,执行提交操作");
      } else {
        console.log("表单校验未通过");
      }
    };
 
    return {
      people,
      validateName,
      validateAge,
      validateForm
    };
  }
};
</script>
<style>
.error {
  color: red;
}
</style>

有需求可以试试.

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue.js实现价格计算器功能

    Vue.js实现价格计算器功能

    这篇文章主要为大家详细介绍了Vue.js实现价格计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue @click与@click.native,及vue事件机制的使用分析

    vue @click与@click.native,及vue事件机制的使用分析

    这篇文章主要介绍了vue @click与@click.native,及vue事件机制的使用分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue自定义复制指令 v-copy功能的实现

    Vue自定义复制指令 v-copy功能的实现

    这篇文章主要介绍了Vue自定义复制指令 v-copy,使用自定义指令创建一个点击复制文本功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • 一文搞懂Vue2中的组件通信

    一文搞懂Vue2中的组件通信

    这篇文章主要为大家介绍了Vue2中的组件通信方式,文中通过示例进行了详细的介绍,对我们学习Vue有一定的帮助,感兴趣的小伙伴可以了解一下
    2022-07-07
  • Vue2/3 登录后用户无操作半小时后自动清除登录信息退出登录下线(示例代码)

    Vue2/3 登录后用户无操作半小时后自动清除登录信息退出登录下线(示例代码)

    这篇文章主要介绍了Vue2/3 登录后用户无操作半小时后自动清除登录信息退出登录下线,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • vue3+vant4封装日期时间组件方式(年月日时分秒)

    vue3+vant4封装日期时间组件方式(年月日时分秒)

    这篇文章主要介绍了vue3+vant4封装日期时间组件方式(年月日时分秒),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue实现Base64编码与解码的代码示例

    Vue实现Base64编码与解码的代码示例

    在Web开发中,Base64编码常用于将二进制数据转换为文本字符串,以便在网络上传输,在Vue.js应用中,Base64编码广泛应用于图像的嵌入,本文将详细介绍如何在Vue.js中实现Base64编码与解码,并提供多种示例和实现思路,需要的朋友可以参考下
    2024-09-09
  • Vue如何由本地js中存放的url地址获取图片

    Vue如何由本地js中存放的url地址获取图片

    这篇文章主要介绍了Vue如何由本地js中存放的url地址获取图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • vue3 reactive响应式依赖收集派发更新原理解析

    vue3 reactive响应式依赖收集派发更新原理解析

    这篇文章主要为大家介绍了vue3响应式reactive依赖收集派发更新原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue3导航栏组件封装实现方法

    Vue3导航栏组件封装实现方法

    这篇文章主要为大家详细介绍了Vue3导航栏组件封装的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论