element ui下拉框踩坑

问题一：

下拉框失焦事件失效

场景：

给下拉框进行多选和可以进行筛选，添加了change事件然后进行失焦事件时，发现添加@blur失败,并没有触发函数

解决方案：

给el-select添加ref,然后在聚焦事件触发的时候添加

复制代码

   name为select的ref
   this.$refs[name].$refs.input.blur = () => {
       console.log("发现失焦时触发了该事件")
    }

这个时候，当失焦的时候就会触发这个失焦事件

问题二：

同时添加了change和remove-tag(多选删除触发函数)的时候，会先触发change

解决方案：

可以在remove-tag中阻止默认的change事件，然后在处理完所有逻辑后手动触发一个自定义的change事件或者重新设置下拉框的值以触发change事件

复制代码

html
  <el-select v-model="selected" @change="handleChange" @remove-tag="handleRemoveTag">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
  <template #default="{ handleClose }">
    <el-tag
      v-for="tag in selected"
      :key="tag"
      closable
      @close="handleClose(tag)">
      {{ tag }}
    </el-tag>
  </template>
</el-select>

js
export default {
  data() {
    return {
      selected: [],
      options: [{ value: 'Option1', label: 'Option 1' }, { value: 'Option2', label: 'Option 2' }]
    };
  },
  methods: {
    handleChange(value) {
      console.log('Change event triggered', value);
      // 这里可以添加其他逻辑
    },
    handleRemoveTag(removedTag) {
      // 阻止默认的change事件，因为remove-tag会先触发，然后是change（除非你手动触发）
      console.log('Remove tag triggered', removedTag);
      // 处理删除逻辑后，可以重新设置selected以触发change事件，或者手动调用change方法
      this.selected = this.selected.filter(tag => tag !== removedTag); // 重新设置selected以触发change事件
      this.$nextTick(() => {
        this.handleChange(this.selected); // 手动触发change事件，确保顺序正确
      });
    }
  }
};

方案2:

如果你只是想确保在删除标签后立即执行某些操作，并且希望这些操作在change事件之前执行，你可以在remove-tag中使用$nextTick来确保这些操作在DOM更新后执行。但这种方法主要用于确保操作的时序性，不直接用于触发事件

复制代码

handleRemoveTag(removedTag) {
  console.log('Remove tag triggered', removedTag);
  // 在这里执行你的逻辑，比如过滤数组等
  this.selected = this.selected.filter(tag => tag !== removedTag); // 更新数组但不立即触发change事件
  this.$nextTick(() => {
    // 在DOM更新后执行，但不直接用于触发change事件，因为change通常由数据变化自动触发
    this.handleChange(this.selected); // 手动调用change方法（如果需要）来模拟行为，但不是必需的，因为数据变化会自动触发change事件。
  });
}

问题三：

下拉框层级问题

场景：当给自己写的元素添加了定位后，希望这元素再最高层，希望它的层级高于element ui弹窗的层级，于是加了高层级，发现下拉框的下拉选项和日期插件的弹窗都到了下面，如图

解决方案：给下拉框或者日期插件天机popper-class="set-popper-class",set-popper-class为自己定义的class,可以更改这些气泡的层级

复制代码

  <el-select v-model="value" placeholder="请选择"  popper-class="set-popper-class">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

 css:   **不要加scope**
   .date-popper-class {
	  z-index: 5001 !important;
	}

问题四：

如何修改搜索结果的为空的下拉框文字

解决方案，添加no-data-text

复制代码

	<el-select
	    v-model="value"
	    placeholder="请选择"
        :no-data-text="'暂无数据'"
        >
         <el-option></el-option>
     </el-select>