使用到 @blur事件, @blur事件是当元素失去焦点时所触发的事件

用法:

<el-row class="kong jichushux" v-for="(item, index) in jichupro" :key="index">
<el-col :span="3"><span class="little-title">{{item.name}}</span></el-col>
<el-col :span="6">
<span v-if="vVisible">{{item.value}}</span>
<el-input v-else v-model="item.value" @blur="checkRight(item)"></el-input>
</el-col>
</el-row>

此处还用到的是行的循环,需要挨个对每行进行校验

checkRight(el) {
const name = el.name;
let val = el.value;
// 根据不同的名字进行不同的校验
switch (name) {
case '对象名称':
if(!val) {
this.$message.error('请填入内容')
}
break;
case '对象类型':
if (val && val.substr(0, 5) !== 'value') {
this.$message.error('固定前缀为value,请按格式填写!')
val = ''
}
break;
case '对象类型':
if(!val) {
this.$message.error('请填入内容')
}
break;
default:
break;
}
}