element 表格中 多个输入框 怎么校验 el-form 动态验证规则 el-table中检验多个input
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
问题:在element表格中需要验证多个输入框,如下图:
解决:在表格中加入 el-form-item,上代码
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item label="优惠券配置:" prop="payload">
<el-table :data="form.payload" border class="padloadTable">
<el-table-column prop="id" label="优惠券ID" />
<el-table-column prop="name" label="优惠券名称" />
<el-table-column prop="deduction_rule" label="抵扣规则" />
<el-table-column prop="expire_time" label="有效期" />
<el-table-column prop="surplusNum" label="剩余可发放数量" />
<el-table-column label="发放数量" width="90">
<template slot-scope="scope">
<el-form-item :prop="'payload.'+scope.$index+'.num'" :rules="rules.payloadNum">
<el-input v-model="scope.row.num" size="mini" maxlength="1" oninput="value=value.replace(/[^\d]/g,'')" @blur="inputNum($event,scope.$index)" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot="header">
<el-button type="text" size="small" @click="createCoupon">新增优惠券</el-button>
</template>
<template slot-scope="scope">
<el-button type="text" size="small" @click="deleteFn(scope.row,scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
data() {
const validateNum = (rule, value, callback) => {
if (value === '') {
callback(new Error());
return
}
if (value > 5 || value < 1) {
callback(new Error());
return
}
callback();
}
return {
tableData: [],
rules: {
payloadNum: [{ required: true, validator: validateNum, trigger: 'blur', message: '' }]
},
form: {
payload: [] // 优惠券id
}
};
},
如果只想标红输入框,而不想显示错误提示,可以用css隐藏 错误提示
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)