首页 > 其他分享 >vue elementui validate异步校验改成同步校验返回结果

vue elementui validate异步校验改成同步校验返回结果

时间:2023-05-17 14:44:34浏览次数:41  
标签:layer vue elementui 校验 else params result operationType let

 

异步的校验

 

<script>
import {
  defineComponent,
  ref
} from 'vue'
export default defineComponent({
 methods: {
     getFormDataStatus() {
      let result=  ref(false)
       this.ruleForm.validate((valid)=>{
            if (valid) {
              let params = this.form
              if (this.layer.operationType == 'edit') {
                this.updateForm(params)
              } else if (this.layer.operationType == 'add') {
                this.addForm(params)
              }else if (this.layer.operationType =='viewadd') {
                this.viewAddForm(params)
              }else if (this.layer.operationType == 'viewedit') {
                this.viewUpdateForm(params)
              } 
              result= true
            } else {
              // ElNotification({
              //   type: 'warning',
              //   message: this.$tm('message.sett.common.settInsAcctFormNotNull')
              // })
              result=  false;
            }
          })
          return result;
    },
    getStatus(){
       let  status=   this.getFormDataStatus()
       console.log(status)
    }
 }
})
</script>

查看官网, 可以用function,也可以返回Promise,那就把function改成同步的

 

 

改成同步的校验的代码如下,就是加入async和await,进行同步执行

<script>
import {
  defineComponent,
  ref
} from 'vue'
export default defineComponent({
 methods: {
    async getFormDataStatus() {
      let result=  ref(false)
      await this.ruleForm.validate(async(valid)=>{
            if (valid) {
              let params = this.form
              if (this.layer.operationType == 'edit') {
                this.updateForm(params)
              } else if (this.layer.operationType == 'add') {
                this.addForm(params)
              }else if (this.layer.operationType =='viewadd') {
                this.viewAddForm(params)
              }else if (this.layer.operationType == 'viewedit') {
                this.viewUpdateForm(params)
              } 
              result= true
            } else {
              // ElNotification({
              //   type: 'warning',
              //   message: this.$tm('message.sett.common.settInsAcctFormNotNull')
              // })
              result=  false;
            }
          })
          return result;
    },
    getStatus(){
       let  status=   this.getFormDataStatus()
       console.log(status)
    }
 }
})
</script>

 

标签:layer,vue,elementui,校验,else,params,result,operationType,let
From: https://www.cnblogs.com/zhian/p/17408687.html

相关文章

  • 前端-Vue语法使用
    ES6做为动态语言,感觉底层开始-基本类型就全引用。做为实例化的变量,也变得像指向指针的指针,可以随时切换指针,从而最终的数据类型也更着切换总的来说概念上会比较别扭。以及灵活导致的不确定性。底层都是对象,从对象的类型来搭建。基本类型\ PrimitivevalueUndefined,Null,Boo......
  • vue设置全局scss,报错
    sass-loader版本问题引发的错误:optionshasanunknownproperty'prependData'.Thesepropertiesarevalid当前版本如下:"sass":"^1.32.7","sass-loader":"^12.0.0",原来的写法:css:{loaderOptions:{sass:{......
  • 如何搭建一个vue项目
    一、nvm安装与使用1.1、nvm简介nvm全名node.jsversionmanagement,顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs1.2、nvm下载①github下载https://github.com/coreybutler/nvm-windows/releases②百度网盘下载链接:https://pan.baidu.com/s/1......
  • Vue ElementUI中 table单元格使用多个Popover解决多行溢出隐藏鼠标悬浮提示问题
    Popover的简单介绍trigger属性用于设置何时触发Popover,支持四种触发方式:hover,click,focus和manual。对于触发Popover的元素,有两种写法:使用slot=“reference”的具名插槽,或使用自定义指令v-popover指向Popover的索引ref。placement弹框的出现位置value/v-model状态......
  • 前端-VUE
    工程化这里要从node.js开始。node.js要弄一个基于事件驱动、非阻塞I/O的的web服务,发现V8引擎+JavaScript很合适。这样Js就能直接写后端应用。然后发展成作为本地的运行容器(类似jdk),将js导入到了本地运行领域。以此位基础,发展出了生态环境,里面关系挺绕的,各种轮子,互相占位。......
  • vue自定义组件——search-box
    github地址:https://github.com/lxmghct/my-vue-components组件介绍props:value/v-model:检索框的值,default:''boxStyle:检索框的样式,default:'position:fixed;top:0px;right:100px;'highlightColor:高亮颜色,default:'rgb(246,186,130)'......
  • 企业级项目模板的配置与集成(Vite + Vue3 + TypeScript)
    企业级项目模板的配置与集成(Vite+Vue3+TypeScript)1、项目介绍项目使用:eslint+stylelint+prettier来对我们代码质量做检测和修复。需要使用husky来做commit拦截需要使用commitlint来统一提交规范需要使用preinstall来统一包管理工具。2、环境准备nodev16.14.2pnp......
  • Vue的生命周期
    varvm=newVue({el:"#app",//在基础初始化完成之后,数据和事件配置之前调用beforeCreate(){console.log("beforeCreate")},//初始化全部完成,实例创建完成后立即调用created(){console.log("created")},//挂载之......
  • VUE前端随笔计2
    又是小白记录问题的一次,老规矩,还是抄别人的代码来改。 在表标签中找到了一个点击事件定位代码,对比别人的,发现自己的删多了,把这个补充回去就行了,具体意思不太明白,大概是给这个模型里面填充这行数据。 ......
  • 局部添加加载中效果loading (vue+elementUI)
    产品需求:有时候我们不想为整个页面添加loading效果。只想给局部区域添加loading效果。(这效果就不揍产品了)在一个表格数据加载时,因为需要连接其它东西,所以后台接口返回数据需要较长时间,因此添加局部Loading效果,增加用户体验度,最开始使用下面代码,直接放到<el-table>中,测试......