el-select显示,当选择框的选项无法与选择框的value值匹配时,不想显示value值的处理办法

写在前面,当出现这种情况的时候,选择框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;
        }
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-select组件是Element UI库中的下拉选择组件,用于在页面中展示一个下拉列表供用户选择。根据你提供的引用内容,你遇到的问题是el-selectvalue显示不正确。 要解决el-select value显示不正确的问题,可以尝试以下方法: 1. 确保传入el-select的数据格式正确。el-selectvalue属性应该与options中的value属性对应。如果value不正确,可以检查后台传来的list数据是否包含正确的value。 2. 检查el-select的options是否正确设置了labelvalue属性。el-select的options是一个数组,每个选项都应该包含labelvalue属性。确保labelvalue属性的正确对应。 3. 检查el-select的v-model绑定是否正确。v-model绑定的应该与options中的value属性对应。如果v-model绑定的不正确,可以尝试手动设置v-model,看是否能够正确显示。 4. 如果以上方法都没有解决问题,可以尝试使用computed属性来动态计算el-selectvalue。根据你的具体需求,可以根据后台传来的list数据和其他条件来计算出正确的value。 下面是一个示例代码,演示了如何使用el-select组件并正确显示value: ```html <template> <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> </template> <script> export default { data() { return { selectedValue: '', // 初始化选中的 options: [ { label: '选项1', value: 'option1' }, { label: '选项2', value: 'option2' }, { label: '选项3', value: 'option3' } ] } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值