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

拿我格子衫来

发布于 2022-01-24 15:22:56

7390

发布于 2022-01-24 15:22:56

文章被收录于专栏：TopFETopFE

在表格排版的表单中，使用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;
    }
  }
}

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