最近在写avue的表格,其中有的列展示效果无法满足,是要自定义写的,但是问题来了,校验的时候怎么对自定义列进行校验呢?
avue文档给出了自定义校验的方法,但是没有说给自定义列的校验方法。
我先用自定义列的方法写了,不管输入什么都是校验错误,我打印了校验时的值,发现是空的
//声明校验规则
let validateTotalScore = (rule, value, callback) => {
let regTotalScore = /^[1-9]\d*$/
console.log(value) //控制台打印是空的,说明没拿到值
if(!regTotalScore.test(value)){
callback(new Error('充值金额必须为正整数'))
return
}
callback()
}
//在column中调用
{
label:'充值金额',
prop:'totalScore',
hide:true,
formsolt:true,
editVisdiplay: false,
span:24,
rules:[
{
validator:validateTotalScore,
trigger:'blur'
}
]
},
.vue文件中html代码如下
<!--充值金额-->
<template slot-scope="scope" slot="totalScoreForm">
<div class="rechargeAmount">
<div class="integralRecharge">
{{integralRecharge}}
</div>
<div>
<el-input
maxlength="10"
v-model="rechargeAmount"
@input="NumberToChinese1(rechargeAmount)"></el-input>
元
</div>
<div>
可兑换积分:{{totalScore}}分
</div>
<div>提示:1元=100积分</div>
</div>
</template>
还能有什么办法拿到值进行校验吖,大神们,或者自定义列如何实现校验?
啊啊我知道原因了,我太糊涂了。因为我的充值对话框是自己写的,既不属于avue自带的新增,也不属于编辑,所以自然拿不到数据无法验证,至于验证,重新写了一个标签,通过v-if来控制显示与隐藏
<span v-if="totalScore ==0" && rechargeAmount !=''> 请输入正整数</span>