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

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

交互效果

相关的样式，在表单上添加类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;
    }
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

在表单项 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>

  

 

  
1
  
2
  
3
  
4
  
5
 

技术点

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

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

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/117260820