动态验证表格里的输入框
效果图
<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.字段
!!! ?