使用el-select组件时change事件和blur事件执行顺序问题

功能概括

在表格表头字段实现下拉框的筛选功能,点击表头字段时,显示对应筛选的下拉框列表

                         ​​​​​​​                            

  <div
    class="order-div-dable-head-item mouse_style"
    v-if="!showScreen"
    @click="clickHeader">
    {{ title}}
    <el-icon style="vertical-align: middle; margin-left: 5px">
        <ArrowDown/>
    </el-icon>
  </div>
  <div class="order-div-dable-head-item" v-else>
    <el-select
      v-model="selectValue"
      style="width: 130px"
      ref="Select"
      @change="changeSelect"
      @blur="blurSelect"
    >
      <el-option
        v-for="item in newOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>

这里我主要用到了下拉框的两个事件:change事件和blur事件

  • change事件

        监听到选择下拉框值时,直接触发对应的表格筛选接口方法

        如果监听到选择了“全部”项,则直接隐藏该下拉框恢复为原来的表头字段“订单状态”

// select的Change事件
    changeSelect(val) {
    // 判断是否为空值,空值则为全部项
      if (!val) {
        // 是则直接隐藏select,显示表头字段
        this.showScreen = false;
      }
      //  触发查询事件
      this.getList()
    },
  • blur事件

        当下拉框失去焦点时,判断是否为“全部”项,是则恢复表头字段。

// select的blur事件
    blurSelect() {
     // selectValue是与select组件双向绑定的值
     if (!this.selectValue) {
        // 如果该值为全部则隐藏该下拉框,显示表头字段
          this.showScreen = false;
        }
    },

遇到的问题

        当我在点击下拉框的选择项时,按道理是先触发change事件切换当前值后,再触发blur的失去焦点事件

        但完全不对。点击选择项后,只触发了blur失焦事件,change事件并没有触发。因为点击了选择项后直接就失去了焦点,与select组件绑定的值一直为空字符串。所以直接就隐藏了。并且按照事件的执行顺序blur事件>change事件

所以blur事件方法优先生效,并判断不到改变的值,则修改了v-if的开关,讲下拉框的dom直接删除了,就不会在往下执行change事件。

解决方法

  •   给blur事件添加一个定时器,则change事件先触发,再触发blur事件。完美解决。
 // select的blur事件
    blurSelect() {
      setTimeout(() => {
        if (!this.selectValue) {
          this.showScreen = false;
        }
      }, 100);
    },

但也可能不是很好的解决方法。如果大佬们有更好的方法,也欢迎大佬们一起分享探讨!

​​​​​​​以上都是我个人见解,如有不对的地方,欢迎大佬们批评指正,互相学习。感谢观看!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值