当前位置: 首页 > news >正文

解决elementUI表格里嵌套输入框,检验时错误信息被遮挡

1.表格

自定义错误信息显示div

            <el-form-item label="租赁价格" prop="supplierId"><el-table-column prop="salePrice" label="销售价" align="center"><template slot-scope="scope"><el-form-item label="" :prop="`leasingCycleInfo[${scope.$index}].salePrice`":rules="rules['salePrice']"><el-input v-model.trim="scope.row.salePrice" clearable placeholder="请输入销售价"></el-input><div v-if="errors[scope.$index] && errors[scope.$index].salePrice" class="error-message">{{errors[scope.$index].salePrice }}</div></el-form-item></template></el-table-column></el-table></el-form-item>

2.校验方法中,使用对象存储错误信息

data() {  
var validateSalePrice = (rule, value, callback) => {let curIdx = this.equipmentLeaseForm.leasingCycleInfo.findIndex(item => item.salePrice === value);console.log(curIdx);if (value === '') {if (curIdx != -1) {this.$set(this.errors, curIdx, { salePrice: "请输入销售价格" });}callback(new Error('请输入销售价格'));} else if (value < 0) {if (curIdx != -1) {this.$set(this.errors, curIdx, { salePrice: "销售价格不能小于0" });}callback(new Error('销售价格不能小于0'));} else {delete this.errors.salePrice;callback();}};return {
...rules: {salePrice: [{ validator: validateSalePrice, trigger: "blur" }]},errors: [],
}

3.定义错误信息样式

  .error-message {color: #F56C6C;font-size: 12px;line-height: 1;padding-top: 4px;}

4.处理方式二,使用el-tooltips进行提示

http://www.lryc.cn/news/423507.html

相关文章:

  • Unity读取Android外部文件
  • 【5.3 python中的元组】
  • Debezium报错处理系列之第116篇:Caused by: java.lang.NumberFormatException: null
  • 【启明智显技术分享】工业级HMI芯片Model3C/Model3A开发过程中问题记录笔记二
  • Python 函数返回yield还是return?这是个问题
  • Linux系统性能调优
  • PHPStorm 环境配置与应用详解
  • 前端各种文本文件预览 文本编辑excel预览编辑 pdf预览word预览 excel下载pdf下载word下载
  • 【Qt】QPluginLoader 类学习
  • DataGear 企业版 1.2.0 发布,数据可视化分析平台
  • 为啥https比http慢
  • 软件测试需要具备的基础知识【功能测试】---后端知识(三)
  • 详解 Redis 队列 实现
  • 分析SQL的count(*)并优化
  • Java学习日记(day18)
  • Oracle(61)什么是外部表(External Table)?
  • 物联网HMI/网关搭载ARM+CODESYS实现软PLC+HMI一体化
  • Java中Stream流
  • 纯css实现多行文本右下角最后一行展示全部按钮
  • WPF篇(17)-ListBox列表控件+ListView数据列表控件
  • HAProxy 全解析:驾驭网络负载均衡与高可用的强大引擎
  • 陶瓷材质的防静电架空地板越来越受欢迎的原因
  • Mariadb数据库本机无密码登录的问题解决
  • 校园外卖平台小程序的设计
  • Python3 第八十一课 -- urllib
  • Vue 3+Vite+Eectron从入门到实战系列之(五)一后台管理登录页
  • Docker 网络代理配置及防火墙设置指南
  • 基于PostGIS(Postgres)+Node.js实现的xyz瓦片地图服务器
  • 浙大数据结构慕课课后题(06-图3 六度空间)
  • Windows File Recovery卡在99%怎么解决?实用指南!