element ui中el-table-column进行自定义校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui中el-table-column进行自定义校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

有两种方式，第一种是提示的方式，

效果：输入框为空的时候： element 表格校验,element-ui,vue.js,前端,elementui

效果：点击确定是进行校验： element 表格校验,element-ui,vue.js,前端,elementui

效果： element 表格校验,element-ui,vue.js,前端,elementui

代码的思路是这样的

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就表示数组中没有为空的了'
}

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

效果：验证 element 表格校验,element-ui,vue.js,前端,elementui

源码奉上：

<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>

有需求可以试试.文章来源地址https://www.toymoban.com/news/detail-732309.html

到了这里，关于element ui中el-table-column进行自定义校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！