写在前面,当出现这种情况的时候,选择框option肯定是从接口获取的。
举例一个表单回显时的情况,当点击编辑按钮,表单打开。由于没有想匹配的选项,选择框自然显示了所获取的value值。那么我们处理这个情况的代码就得放在这个地方,写在点击编辑按钮的方法中。下面我先贴出代码再稍微讲下逻辑。
this.addForm = { ...row };
let i = [];
//数组的filter方法,如果匹配成功元素放进i数组
i = this.mediumList.filter(item => {
return item == this.addForm.storagemediumid
})
//判断i数组长度,如果等于0,那么上面就没有匹配成功的元素,相当于选择框中的选项没有与表单中storagemediumid想对应的值,选择框显示为空
if(i.length === 0){
this.addForm.storagemediumid = null;
}
还有第二种方法,用到了forEach与try、catch语法(中止forEach的循环,可能之后会在其他地方用到)
this.addForm = { ...row };
let i = true; //声明一个变量,用做判断
//解决存储介质数组无对应匹配选问题,匹配不成功选择框显示为空
try {//因为要终止forEach循环,所以使用try、catch
this.mediumList.forEach(item => {
if (item.id == this.addForm.storagemediumid) {
throw new Error("匹配成功");
//匹配成功,抛出错误,进入catch事件;如果匹配不成功,就代表选择框的options与选择框value不匹配,不做任何操作,操持i的状态
}
});
} catch (e) {
i = false;
//改变i的状态,使之不能进入把选择框值置为空条件
}
//i为true,value值与options匹配不成功,把value值置为null
if (i) {
this.addForm.storagemediumid = null;
}