el-form rules validator函数自定义参数

最新推荐文章于 2025-04-01 11:03:07 发布

易de

最新推荐文章于 2025-04-01 11:03:07 发布

阅读量848

点赞数

文章标签：前端 elementui

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.youkuaiyun.com/qq_45021462/article/details/131073479

版权

文章展示了一个在Vue.js中使用ElementUI库的el-table组件时，如何对表格内的一列（数量列）设置用户输入限制的例子。输入框的值必须小于或等于同一行的另一列（如useNum列）的值，并且不能为0或为空。验证过程通过自定义方法vaildNum实现，该方法会在值改变时触发，并提供错误反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例：
el-table中的有一列是用户手动输入，输入框的值不能大于某一列的值。
在这里插入图片描述

<el-table-column
   prop="count"
   label="数量"
 >
   <template slot-scope="scope">
     <el-form-item
       :prop="'tableData.' + scope.$index + '.num'"
       :rules="[
         { required: true, validator: (e1, e2, e3) => vaildNum(e1, e2, e3, scope.row), trigger: 'change', },
       ]"
     >
       <el-input
         size="small"
         v-model="scope.row.num"
         placeholder="请输入"
         clearable
         style="width:100%"
       />
     </el-form-item>
   </template>
 </el-table-column>

methods: {
	// 数量校验
	vaildNum(rule, value, callback, row) {
	  if (value) {
	    // 退货数量不能大于入库数量
	    if (value > row.useNum) {
	      callback(new Error("退货数量不能大于入库数量"));
	    } else if(value == 0) {
	      callback(new Error("退货数量不能为0"));
	    } else {
	      callback();
	    }
	  } else {
	    callback(new Error("退货数量不能为空"));
	  }
	},
}