VUE 列表循环Input并加校验
<!--批量设置扣点率--><el-dialog:title="$t('批量设置商品扣点率')":close-on-click-modal="false":close-on-press-escape="false":visible.sync="dialogSetBrok"><div c...
·
<!--批量设置扣点率-->
<el-dialog
:title="$t('批量设置商品扣点率')"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="dialogSetBrok">
<div class="columns columns-table">
<div class="column">
<el-card>
<div class="columns">
<div class="column is-full">
<el-form
ref="dataForm"
:model="tablesOnly"
:rules="rules"
class="demo-ruleForm">
<el-table
:data="tablesOnly.tablesb"
border>
<el-table-column
:label="$t('商品名称')"
align="center"
prop="skuName"/>
<el-table-column
:label="$t('商品编码')"
align="center"
prop="skuCode"/>
<el-table-column
:label="$t('单品扣点率')"
align="center">
<template slot-scope="scope">
<el-form-item
:prop="'tablesb.'+scope.$index+'.deductionPoints'"
:rules="rules.deductionPoints">
<el-input
v-model="scope.row.deductionPoints"
maxlength="5"/>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</div>
</el-card>
</div>
</div>
<div class="columns">
<div class="column">
<div class="clearfix">
<div align="center">
<el-button
size="small"
@click="dialogSetBrok = false">
{{ $t('关闭') }}
</el-button>
<el-button
type="primary"
size="small"
@click="addBuckle()">{{ $t('确认') }}
</el-button>
</div>
</div>
</div>
</div>
</el-dialog>
import ruler from '@/utils/ruler'
this.rules = {
deductionPoints: [
ruler.plusFloat(3, 2, '扣点率格式不正确,请重新输入!', 'blur')
]
}
效果图:INPUT的值会直接更改列表的值
更多推荐
已为社区贡献4条内容
所有评论(0)