主要记录自己在平时遇到的已解决的问题
这次的问题主要场景是新建时,要求一个el-form-item下有三个el-input-number,并且要校验。
以下是最终版:
template里的内容
<el-form-item label="次数要求" prop="Frequency">
<div>
<span>次数一:</span><el-input-number v-model="DialogForm.Frequency[0]" :min="0" :max="100" :precision="0"></el-input-number> 次
</div>
<div class="Style">
<span>次数二:</span><el-input-number v-model="DialogForm.Frequency[1]" :min="0" :max="100" :precision="0"></el-input-number> 次
</div>
<div>
<span>次数三:</span><el-input-number v-model="DialogForm.Frequency[2]" :min="0" :max="100" :precision="0" ></el-input-number> 次
</div>
</el-form-item>
script里的校验
export default {
data() {
var newRule=(rule, value, callback)=>{
if(value[0] === undefined || value[1] === undefined || value[2] === undefined){
callback(new Error(rule.message || '请选择或者输入次数'))
}else{
callback()
}
}
return {
DialogForm: {
Frequency:[0,0,0]
},
rules: {
Frequency: [
{validator: newRule ,trigger:['blur','change']}
]
}
};
最初的时候,我写的v-model是用的三个具体的字段代替,比如v-model=“DialogForm.Frequency.FirstNumber”,但是我在写校验函数时,发现value里有字段,但是写出来会报undefined,然后我就转为不写字段。
但是我写的这个校验函数还有改进空间,这种写法比较局限且累赘。