elementUI手动控制校验状态

本文主要是介绍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>

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