elementUI手动控制校验状态
2021/9/27 6:10:42
本文主要是介绍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>
效果:对应的图标会发生变化
这篇关于elementUI手动控制校验状态的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南
- 2024-09-26Springboot微服务资料入门教程