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

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

交互效果

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

代码语言：javascript复制

// 行内错误信息 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 插槽

代码语言：javascript复制

<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

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

error form icon select tooltip

0 人点赞