好久没有写代码了,有点手生,想实现这个功能,在网上搜了搜相关示例后,一个简单的需求发现写的太复杂了,经过多次尝试,总结出稍微简单些的写法。

关键代码:样式需要添加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()
	}
},

示例:

 

 最终效果:

 到此就结束了,希望能解决各位的问题

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐