vue element 可编辑表格行内验证 简单示例
vue element 可编辑表格行内验证 简单示例,在网上搜了搜相关示例后,一个简单的需求发现写的太复杂了,经过多次尝试,总结出稍微简单些的写法。
·
好久没有写代码了,有点手生,想实现这个功能,在网上搜了搜相关示例后,一个简单的需求发现写的太复杂了,经过多次尝试,总结出稍微简单些的写法。
关键代码:样式需要添加style="margin-bottom: 0px;"为了输入框高度居中 :inline-message="true"为了可以将校验文字完整显示出来。检验函数参数是固定的rule, value, callback,如果需要增加别的传参可以(rule, value, callback)=>{return getAmountRule(rule, value, callback,scope.row)},这样就把row的值传递到校验方法中了
<el-table-column prop="realAmount" label="完成数量">
<template slot-scope="scope">
<el-form-item label-width="0px" :prop="'dataList[' + scope.$index + '].realAmount'"
:rules="[{validator: (rule, value, callback)=>{return getAmountRule(rule, value, callback)},trigger: 'blur'}]" style="margin-bottom: 0px;" :inline-message="true">
<el-input clearable placeholder="完成数量"
v-model="dataForm.dataList[scope.$index].realAmount"
></el-input>
</el-form-item>
</template>
</el-table-column>
其中dataList为dataForm表单中的集合,prop的写法可以参考官网表单中的动态增减表单项,链接放上:
Element - The world's most popular Vue UI framework
然后在method中加上自定义的校验方法即可,校验成功就调用callback方法,校验失败调用callback(new Error(''))方法,无论校验成功失败,一定要调用回调方法。
getAmountRule(rule, value, callback){
let reg = /^[0-9]*[1-9][0-9]*$/
if (isNaN(value)) {
callback(new Error('请输入正整数'))
} else if (!reg.test(value)) {
callback(new Error('请输入正整数'))
} else if (Number(1000) <= Number(value)) {
callback(new Error('请输入小于1000的数字'))
} else {
callback()
}
},
示例:
最终效果:
到此就结束了,希望能解决各位的问题
更多推荐
已为社区贡献1条内容
所有评论(0)