功能概括

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

  <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);
    },

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

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

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

功能概括

遇到的问题

解决方法