手动控制校验状态,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>
效果:对应的图标会发生变化
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。