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()
	}
},

示例：

 

 最终效果：

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