element ui下拉框踩坑

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

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

   name为select的refthis.$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-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option><template #default="{ handleClose }"><el-tagv-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-optionv-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-selectv-model="value"placeholder="请选择":no-data-text="'暂无数据'"><el-option></el-option></el-select>