elment-ui表格table中input校验坑

最新推荐文章于 2024-08-23 11:40:03 发布

qq_39995737

最新推荐文章于 2024-08-23 11:40:03 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui 文章标签： javascript elementui

本文链接：https://blog.csdn.net/qq_39995737/article/details/120302664

本文主要介绍了在Element UI的表格组件中如何进行input字段的校验。通过prop和rules进行校验，prop的值需要根据表格data动态生成，如`'表格数据名.' + scope.$index + '.字段名'`。同时强调data中必须定义校验规则，否则数据提交时会因validate拦截导致失败。此外，还提及了一种利用error属性进行校验的方案，虽能显示错误信息，但在数据提交时可能无法被validate拦截。

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

参考了这个文章：https://blog.csdn.net/josiecici/article/details/118082391，
1.在表格中的input 一般是这种方式，利用prop和rules进行校验，但难点在于prop的设置
在表格中input的prop取决于表格的data
如果表格是：

 <el-table
   border
    :data="inputForm.oaprojBudgetOtherAmountList"
    style="width: 100%">

则在列中的input应该是

<el-table-column
   prop="payRate"
   header-align="center"
   align="center"
   label="付款比例">
   <template slot-scope="scope" >
     <el-form-item :prop="'oaprojBudgetOtherAmountList.'+scope.$index+'.payRate'"