elementUI手动控制校验状态

发布时间:2022-07-04 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了elementUI手动控制校验状态脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

手动控制校验状态,elementUI文档里面是没有的

 

<template>
  <div id="app">
    <!-- status-icon 用于显示input框里的校验状态,需要写在 el-form里 -->
    <el-form ref="form" :model="form" label-width="80px"  status-icon inline >
      <!-- 需要添加 error和validate-status属性 -->
      <el-form-ITem label="活动名称" PRop="name"  :error="error" :validate-status="status" >
        <el-input v-model="form.name"></el-input>
        
      </el-form-item>
      <el-button @click="validating()">校验中</el-button>
        <el-button @click="success()">校验成功</el-button>
        <el-button @click="fail()">校验失败</el-button>
        <el-button @click="novali()">无校验</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {},
  data() {
    return {
      form: {
          name: '',
      },
      error:'自定义错误',
      status:'error',// validate-status 有以下四种状态:1,succcess 2.validating 3.error ,4. '' 
      
    }
  },
  methods:{
    validating(){
      this.status = 'validating'
    },
    success(){
      this.status = 'success'
    },
      fail(){
      this.status = 'error'
      this.error = '失败了哦'
    },
    novali(){
      this.status = ''
    }
  }
};
</script>

效果:对应的图标会发生变化

@H_55_304@

 

 

elementUI手动控制校验状态

 

 

elementUI手动控制校验状态

 

 

elementUI手动控制校验状态

 

脚本宝典总结

以上是脚本宝典为你收集整理的elementUI手动控制校验状态全部内容,希望文章能够帮你解决elementUI手动控制校验状态所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。