element的table获取当前表格行

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

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

1.局部html

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.验证规则

javascript 复制代码
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();
  }
};
相关推荐
Rudon滨海渔村3 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg50178 分钟前
Vue回调函数中的this
前端·javascript·vue.js
程序猿大波9 分钟前
基于Java,SpringBoot,Vue,HTML宠物相亲配对婚恋系统设计
java·vue.js·spring boot
前端太佬9 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200420 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼21 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_092725 分钟前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸26 分钟前
一文带你使用Vue完成移动端(apk)项目
前端
纪元A梦36 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生38 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue