脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 elementUI的form表单验证

vue3在table里使用elementUI的form表单验证的示例代码

 更新时间：2023年12月13日 11:28:14   作者：小朱小先生  
这篇文章主要介绍了vue3在table里使用elementUI的form表单验证的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

        常规情况下。rules和formItem是一对一的。例如下面的情况，判断表单内的测试1和测试2是否为空。

<template>
    <el-form
        :model="formParams.form"
        :rules="formParams.rules"
    >
      <el-form-item label="测试1" prop="input1">
        <el-input v-model="formParams.form.input1"></el-input>
      </el-form-item>
      <el-form-item label="测试2" prop="input2">
        <el-input v-model="formParams.form.input2"></el-input>
      </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
const formParams = reactive({
  form:{
    input1: "",
    input2: ""
  },
  rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
function validator_isEmpty (rule: any, value: string, callback: any)  {
  if (isEmpty(value)) {
  callback(new Error("必填项，请输入数据"));
} else {
  callback();
}
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

        但是，如果在table中就按照常规的写法如下会发现不管如何输入或删除都将触发valid=false校验。如果在validator_isEmpty中打印value值会发现，value一直未undefined。

<template>
  <el-form
      :model="tableData.data"
      :rules="tableData.rules"
  >
    <el-table
        :data="tableData.data">
      <el-table-column label="测试1">
        <template #default="scope">
          <el-form-item prop="input1">
            <el-input v-model="scope.row.input1"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="测试2">
        <template #default="scope">
          <el-form-item prop="input2">
            <el-input v-model="scope.row.input2"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
let tableData = reactive({
data:[
  {
    input1: "",
    input2: ""
  }
],
rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
const formParams = reactive({
  form: {
    input1: "",
    input2: ""
  },
  rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
function validator_isEmpty(rule: any, value: string, callback: any) {
  if (isEmpty(value)) {
    callback(new Error("必填项，请输入数据"));
  } else {
    callback();
  }
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

        所以使用下面的方式。但是有几个重点。

1、外层的el-form的model需要关联到tableData.data，否则使用validate方法将无法触发

2、去掉外层el-form的rules属性

3、对el-table-column里的el-form-item添加rules属性，其中rules中的validator采用bind的方式传递行参数

4、对el-table-column里的el-form-item中prop属性需要保留

之后的操作就跟普通的form验证一样

<template>
  <el-form
      :model="tableData.data"
  >
    <el-table
        :data="tableData.data">
      <el-table-column label="测试1">
        <template #default="scope">
          <el-form-item prop="input1" :rules="{
            validator: validator_isEmpty_arg.bind(this, scope.row.input1),
            trigger: 'change'
          }">
            <el-input v-model="scope.row.input1"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="测试2">
        <template #default="scope">
          <el-form-item prop="input2" :rules="{
            validator: validator_isEmpty_arg.bind(this, scope.row.input2),
            trigger: 'change'
          }">
            <el-input v-model="scope.row.input2"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
let tableData = reactive({
  data: [
    {
      input1: "",
      input2: ""
    }
  ]
})
function validator_isEmpty_arg(rowValue: any, rule: any,value: string, callback: any){
  if (isEmpty(rowValue)) {
    callback(new Error("必填项，请输入数据"));
  } else {
    callback();
  }
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

到此这篇关于vue3在table里使用elementUI的form表单验证的文章就介绍到这了,更多相关vue3 elementUI的form表单验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue使用pinia实现全局无缝通信

    vue使用pinia实现全局无缝通信

    这篇文章主要为大家详细介绍了vue如何使用pinia实现全局无缝通信,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
    2023-11-11
  • vue.js学习之递归组件

    vue.js学习之递归组件

    最近学习vue.js有一段时间了，使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，所以今天写出来和大家一起分享。有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • Vue加载读取本地txt/json等文件的实现方式

    Vue加载读取本地txt/json等文件的实现方式

    这篇文章主要介绍了Vue加载读取本地txt/json等文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

    超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

    这篇文章主要介绍了超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue中多元素过渡特效的解决方案

    Vue中多元素过渡特效的解决方案

    本文将详细介绍通过Vue使多元素进行过渡动画,需要的朋友可以参考下
    2020-02-02
  • 基于Vue+ELement搭建动态树与数据表格实现分页模糊查询实战全过程

    基于Vue+ELement搭建动态树与数据表格实现分页模糊查询实战全过程

    这篇文章主要给大家介绍了关于如何基于Vue+ELement搭建动态树与数据表格实现分页模糊查询的相关资料,Vue Element UI提供了el-pagination组件来实现表格数据的分页功能,需要的朋友可以参考下
    2023-10-10
  • 解决vue-cli项目开发运行时内存暴涨卡死电脑问题

    解决vue-cli项目开发运行时内存暴涨卡死电脑问题

    最近开发一个vue项目时遇到电脑卡死问题，突然间系统就非常卡，然后卡着卡着就死机了，鼠标也动不了了，只能冷启动。这篇文章主要介绍了vue-cli项目开发运行时内存暴涨卡死电脑问题,需要的朋友可以参考下
    2019-10-10
  • Vue模拟实现购物车结算功能

    Vue模拟实现购物车结算功能

    这篇文章主要为大家详细介绍了Vue模拟实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue CLI3搭建的项目中路径相关问题的解决

    Vue CLI3搭建的项目中路径相关问题的解决

    这篇文章主要介绍了Vue CLI3搭建的项目中路径相关问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue中的Object.freeze() 优化数据方式

    vue中的Object.freeze() 优化数据方式

    这篇文章主要介绍了vue中的Object.freeze()优化数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04

最新评论