每日三思:element-ui利用form表单验证来验证表格

最新推荐文章于 2022-10-19 17:01:30 发布

原创最新推荐文章于 2022-10-19 17:01:30 发布 · 487 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#表单验证表格

element-ui 同时被 3 个专栏收录

28 篇文章

订阅专栏

el-talbe

6 篇文章

订阅专栏

el-form

2 篇文章

订阅专栏

博客主要围绕动态验证表格里的输入框展开，给出了效果图，提到 rules 中内容需对应，强调了注意事项，指出可能出现的报错是因注意事项端不统一，且使用的是字段。

动态验证表格里的输入框

效果图在这里插入图片描述

<el-form :model="form" :rules="rules" ref="form">
	<el-table class="form-brand-list" stripe v-if="form.prdctStoreList && form.prdctStoreList.length > 0" :data="form.prdctStoreList">
	<el-table-column label="原价(元)" width="200"  class-name="td-input">
        <template slot-scope="scope">
          <el-form-item :key="scope.$index" :prop="'prdctStoreList.'+scope.$index+'.mktPrice'" :rules="rules.mktPrice">
            <el-input type="number" maxlength="5" @keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.mktPrice',9999999,0)" v-model.number="scope.row.mktPrice" min="0" max="9999999"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="售价(元)" width="200"  class-name="td-input">
        <template slot-scope="scope">
          <el-form-item :key="scope.$index" :prop="'prdctStoreList.'+scope.$index+'.activStoreSellPrice'" :rules="rules.activStoreSellPrice">
            <el-input type="number" maxlength="5" @keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',9999999,0)" v-model.number="scope.row.activStoreSellPrice" min="0" max="9999999"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
	</el-table>
</el-form>

rules

rules: {
  'mktPrice': {required: true, type: 'number', message: '请输入原价', trigger: 'blur'},
   'activStoreSellPrice': {required: true, type: 'number', message: '请输入售价', trigger: 'blur'}
 },

注意事项

<el-form-item :key="scope.$index" :prop="'prdctStoreList.'+scope.$index+'.activStoreSellPrice'" :rules="rules.activStoreSellPrice">

中的prdctStoreList要和

<el-table class="form-brand-list" stripe v-if="form.prdctStoreList && form.prdctStoreList.length > 0" :data="form.prdctStoreList">

中的form.prdctStoreList对应

可能出现的报错

please transfer a valid prop path to form item

就是因为上面的注意事项端不统一,切记!!!el-form-item使用的是字段而不是form.字段!!! ?