自定义交互element-ui表单的校验信息

一时失言乱红尘 2022-10-15 14:49 26阅读 0赞

在表格排版的表单中，使用icon+ tooltip来显示错误的验证信息。充分优化用户体验，使表格每行以最优雅的高度显示，节省空间。  
支持 input 与 select

交互效果  
![在这里插入图片描述][20210525173024749.gif]

相关的样式，在表单上添加类`design-form-validateicon`

// 行内错误信息 icon 加 tooltip显示效果 .design-form-validateicon { 
      .el-form-item--small.el-form-item { 
        margin-bottom: 0;
      }
    
      .el-form-item .error-tip { 
        position: absolute;
        right: 6px;
        top: 0;
        transition: 0.2s;
      }
      .el-form-item.is-error { 
        .error-tip { 
          color: #f74439;
        }
        .el-form-item__content .el-select + .error-tip { 
          right: 26px;
        }
      }
    }

在表单项 `el-form-item`组件中添加自定义 `error` 插槽

<template slot="error" slot-scope="{ error }">
       <el-tooltip class="item error-tip" effect="dark" :content="error" placement="top">
         <span v-if="error"><i class="el-icon-warning"></i></span>
       </el-tooltip>
     </template>

## 技术点 ##

相对定位的校验信息会闪烁  
使用 css `+` 选择器来设置 select的 icon

写文章越来越随便了，主要是累啊。 多多见谅。

[20210525173024749.gif]: /images/20221014/7b3c75a3bc8342c7a9d74f9d3feb6721.png

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用ElementUI对表单元素进行自定义校验

前言在使用ElementUI的表单元素时候，除了做一些简单的非空处理校验，在一些特殊的场合，还需要我们做一些自定义校验。其实ElementUI不仅提供了基本的非空校

蔚落/ 2023年09月24日 19:41/ 0 赞/ 87 阅读

相关 Iview 自定义表单校验

1、定义方法method下面 validateAge(rule, value, callback)\{ console.log(1); if (!value) \{

Bertha 。/ 2023年06月12日 08:39/ 0 赞/ 178 阅读

相关 layui自定义表单校验

layui表单元素的校验只需在元素上加入lay-verify，layui提供了以下值。 <table> <tbody> <tr> <td> <p>1</p>

向右看齐/ 2022年12月13日 04:48/ 0 赞/ 429 阅读

相关 element-ui自定义表单校验规则及常用表单校验

前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

妖狐艹你老母/ 2022年12月11日 07:58/ 0 赞/ 403 阅读

相关 elementui表单密码强度自定义验证

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

约定不等于承诺〃/ 2022年11月27日 08:54/ 0 赞/ 384 阅读

相关 vue element form 自定义校验1(表单校验)

通过`ref`属性获得表单对象,调用表单对象的`validate`函数进行表单的整体校验 <template> <!--model绑定整个form对象的的

逃离我推掉我的手/ 2022年10月30日 00:33/ 0 赞/ 54 阅读

相关自定义交互element-ui表单的校验信息

在表格排版的表单中，使用icon+ tooltip来显示错误的验证信息。充分优化用户体验，使表格每行以最优雅的高度显示，节省空间。支持 input 与 select 交

一时失言乱红尘/ 2022年10月15日 14:49/ 0 赞/ 27 阅读

相关 layui自定义表单校验

自定义一个金额的校验 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

雨点打透心脏的1/2处/ 2022年06月03日 01:58/ 0 赞/ 464 阅读

相关 vue 表单自定义校验方法

所用组件：Element UI 直接上代码 <el-form :model="editForm" :rules="editFormRules">

ゝ一世哀愁。/ 2022年05月13日 14:04/ 0 赞/ 445 阅读

相关 elementui 自定义表单验证邮箱、电话号码

1.html部分: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125

拼搏现实的明天。/ 2022年03月11日 10:16/ 0 赞/ 1100 阅读