vue+elementUI 进行表格行内新增及校验，同行其他输入框数据影响当前输入框校验结果

最新推荐文章于 2025-09-14 22:02:42 发布

原创最新推荐文章于 2025-09-14 22:02:42 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

现有需求如下:
请添加图片描述
当表格同一行内本次核验数不为0时，所属仓库必填。

那么问题的就转换为,在所属仓库做校验时,必须拿到同行的数据.解决代码如下:

<!--其他部分都正常写,此处重点展示所属仓库这一栏的写法-->
<el-table-column
  label="所属仓库"
  align="center"
  prop="storeId"
>
  <template slot-scope="scope">
    <el-form-item
      label=""
      :prop="'dataList.' + scope.$index + '.storeId'"
      :rules="[
        {
          validator: (rule, value, callback) => {
            return isStoreIdRequired(rule, value, callback, scope.row);
          },
          trigger: 'blur',
        },
      ]"
    >
      <el-select
        v-model="scope.row.storeId"
        filterable
        placeholder="请选择所属仓库"
      >
        <el-option
          v-for="dict in storeList"
          :key="dict.storeId + ''"
          :label="dict.storeName"
          :value="dict.storeId + ''"
        >
          <span style="float: left">{{ dict.storeCode }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{
            dict.storeName
          }}</span>
        </el-option>
      </el-select>
    </el-form-item>
  </template>
</el-table-column>
------校验方法↓----
isStoreIdRequired(rule, value, callback, row, index) {
//thisNum 为本次核验数
  if (row.thisNum == 0) {
    callback();
  } else if (row.thisNum != 0 && value) {
    callback();
  } else {
    callback(new Error("本次核验数不为0时，所属仓库必填"));
  }
},