首页 > 其他分享 >element的table获取当前表格行

element的table获取当前表格行

时间:2024-06-21 14:31:04浏览次数:19  
标签:限价 表格 value element callback Error table else new

需求:验证表格同一行的最低限价不能超过销售定价

思路:先获取当前行table的index,然后在做大小比较

1.局部html

<el-table-column label="销售定价(元)" min-width="200px">
  <template slot="header">
    <span class="star">*</span>
    <span class="star-name">销售定价(元)</span>
  </template>
  <template slot-scope="scope">
    <el-form-item
      :prop="'skuList.' + scope.$index + '.price'"
      :rules="tableRules.price"
    >
      <el-input
        size="small"
        v-model.trim="scope.row.price"
        @input="userInput"
        placeholder="请输入销售定价"
      />
    </el-form-item>
  </template>
</el-table-column>

<el-table-column label="最低限价(元)" min-width="200px">
  <template slot="header">
    <span class="star">*</span>
    <span class="star-name">最低限价(元)</span>
  </template>
  <template slot-scope="scope">
    <el-form-item
      :prop="'skuList.' + scope.$index + '.floorPrice'"
      :rules="tableRules.floorPrice"
    >
      <el-input
        size="small"
        v-model.trim="scope.row.floorPrice"
        @input="userInput"
        placeholder="请输入最低限价"
      />
    </el-form-item>
  </template>
</el-table-column>

2.验证规则

const checkFloorPrice = (rule, value, callback) => {
  let index = rule.field.split(".")[1];//获取当前行角标
  if (!value) {
    callback(new Error("请输入最低限价"));
  } else if (value == Infinity || value > Math.pow(2, 31) - 1) {
    callback(new Error("您填写的数字过长"));
  } else if (!/^\d+(\.\d{1,2})?$/.test(value)) {
    callback(new Error("请输入小数不超过两位的自然数"));
  } else if (value >= this.tableForm.skuList[index].price) {//重点看这里
    callback(new Error("最低限价不能超过销售定价"));
  } else {
    callback();
  }
};

标签:限价,表格,value,element,callback,Error,table,else,new
From: https://blog.csdn.net/weixin_52326756/article/details/139860096

相关文章

  • 开源项目推荐-vue2+element+axios 个人财务管理系统
    文章目录financialmanagement项目简介项目特色项目预览卫星的实现方式:首次进入卫星效果的实现方式:卫星跟随鼠标滑动的随机效果实现方式:环境准备项目启动项目部署项目地址financialmanagement项目简介vue2+element+axios个人财务管理系统是基于vue2+element+ax......
  • 2024最新超强AI绘画Stable Diffusion整合包安装教程,零基础入门必备!
    大家好,我是设计师阿威2024年绘画圈最火的软件,那妥妥的就StableDiffutionV4升级版无需安装,直接解压就能用(在此要感谢秋葉aaaki大佬的分享!)比之前版本的更加智能、高效和易操作。V4加强版小白也能轻易上手!「无套路!文末提供下载方式」1.软件背景信息▍StableDiffusi......
  • Qt QTableView插入控件,qss设计
    环境Qt5.4.2功能QtQTableView插入控件,qss设计源码1.mainwindow.hclassMyComboBox;classMyDoubleSpinBox;classMainWindow:publicQMainWindow{Q_OBJECTpublic:explicitMainWindow(QWidget*parent=0);~MainWindow();private:Ui:......
  • CompletableFuture多线程并发处理
    CompletableFuture多线程并发处理   概要  一个接口可能需要调用N个其他服务的接口,这在项目开发中还是挺常见的。举个例子:用户请求获取订单信息,可能需要调用用户信息、商品详情、物流信息、商品推荐等接口,  如果是串行(按顺序依次执行每个任务)执行的话,接口的响应速......
  • linux重启后SSH无法启动,报/var/empty/sshd must be owned by root and not group or w
    问题:Linux上的SSH无法启动,执行/usr/sbin/sshd报 /var/empty/sshdmustbeownedbyrootandnotgrouporworld-writable。解决办法:查看发现这个目录的属主不是root,所以启动ssh报错#ls-ld/var/empty/sshd/  d——x——x——x2meifuroot1024Feb192024/var/emp......
  • HTML表格使用全指南,真的很详细
    HTML表格基础与语义化:构建结构化数据展示HTML表格是展示结构化数据的强大工具。通过合理的语义化标签使用,开发者可以创建出既美观又易于理解的表格。本文将介绍HTML表格的基本结构和语法,以及如何使用<caption>、<thead>、<tbody>、<tfoot>和<th>标签进行表格的语义化。HTML表......
  • Element-UI上传时修改上传图片的宽高
    //上传前beforeUpload(file){//创建一个Image对象constimage=newImage();//设置图片的src为选中文件的对象urlimage.src=URL.createObjectURL(file);returnnewPromise((resolve,reject)=>{image.onload=()=>{//设置想要的图片宽......
  • vs code 搭建 vue 3.0+Element-ui
    前言根据上一篇文章,通过vue-cli3.0创建了一个vue项目 https://www.cnblogs.com/FTAH/p/12427997.html 1.在当前项目中加入Element-ui前端框架1.首先在官方网站的这一页我们发现要安装框架 https://element.eleme.cn/#/zh-CN/component/installation 注意这里提供了......
  • java @TableField(exist = false) 和@TableField(select = false) 的区别
    @TableField(exist=false)和@TableField(select=false)都是MyBatis-Plus框架中用于标注实体类字段与数据库表字段映射关系的注解,但它们的作用有所不同:1.@TableField(exist=false)这个注解表示该字段在数据库表中不存在。当使用MyBatis-Plus的自动注入SQL语句功能......
  • 关于excel表格的一些相关公式及函数
    Excel中的公式和函数是进行数据处理和分析的核心。以下是一些常用的Excel公式和函数,它们在各种场景中有广泛的应用:1.**文本处理函数**  -`LEN(text)`:返回文本字符串中的字符数。  -`TEXT(value,[format])`:将数值转换为指定格式的文本。  -`TRIM(text)`:......