el-select选中后失焦

在 el-select 组件选中后失焦，你可以通过监听 el-select 组件的 change 事件，在事件回调函数中触发 el-select 组件的 blur 方法。具体代码如下：

<template>
  <el-select v-model="selectedOption" @change="handleSelectChange">
    <!-- el-select 的选项 -->
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: null
    };
  },
  methods: {
    handleSelectChange() {
      // 执行失焦操作
      this.$refs.select.blur();
    }
  }
};
</script>

在上面的代码中，我们通过 `v-model` 指令绑定了一个 `selectedOption` 变量来实现选项的双向绑定。在 `@change` 事件回调函数中，我们调用了 `this.$refs.select.blur()` 来触发失焦操作，其中 `this.$refs.select` 是 el-select 组件的引用，需要添加 `ref="select"` 属性。

这样，在 el-select 组件选中后，就会触发 change 事件并执行失焦操作。

相关问题

vue3 el-select选中后失焦

在 Vue 3 中使用 Element Plus 的 el-select 组件，在选中后失焦的操作稍有不同。你可以使用 `v-model` 指令绑定选中的值，并使用 `@change` 事件监听选项变化。然后，通过调用 `blur` 方法来手动失焦。以下是示例代码：

<template>
  <el-select v-model="selectedOption" @change="handleSelectChange">
    <!-- el-select 的选项 -->
  </el-select>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedOption = ref(null);

    const handleSelectChange = () => {
      // 执行失焦操作
      const selectInput = document.querySelector('.el-input__inner');
      if (selectInput) {
        selectInput.blur();
      }
    };

    return {
      selectedOption,
      handleSelectChange
    };
  }
};
</script>

在上面的代码中，我们使用 `ref` 创建了一个响应式的 `selectedOption` 变量，通过 `v-model` 将其绑定到 el-select 组件上实现双向绑定。在 `handleSelectChange` 方法中，我们通过 `document.querySelector` 获取到 el-select 的输入框元素，并调用 `blur` 方法进行失焦操作。

请注意，这里使用了普通的 DOM 操作来获取 el-select 的输入框元素，因为在 Vue 3 中没有了 `$refs`，需要通过普通的 DOM 操作来获取元素。另外，`.el-input__inner` 是 Element Plus 中 el-select 输入框的类名，你可以根据实际情况进行调整。

这样，在 el-select 组件选中后，就会触发 change 事件并执行失焦操作。

修改el-select选中后的el-opation样式

要修改el-select选中后的el-option样式，你可以使用以下方法：

1. 使用CSS选择器来修改样式。首先，给el-select设置一个唯一的class或id，例如"my-select"。然后使用CSS选择器来选择el-select选中的el-option元素，并修改它的样式。例如：

#my-select .el-select-dropdown .el-select-dropdown__item.selected {
  background-color: #ff0000; /* 修改选中项的背景颜色为红色 */
  color: #ffffff; /* 修改选中项的文字颜色为白色 */
}

2. 使用scoped CSS来修改样式。如果你在Vue组件中使用el-select，可以使用scoped CSS来仅仅作用于当前组件的样式。在组件的style标签中添加以下代码：

<style scoped>
.my-select .el-select-dropdown .el-select-dropdown__item.selected {
  background-color: #ff0000; /* 修改选中项的背景颜色为红色 */
  color: #ffffff; /* 修改选中项的文字颜色为白色 */
}
</style>

确保给el-select设置一个唯一的class或id（例如"my-select"），并将该class或id添加到el-select的class属性中（例如:class="'my-select'"）。

这些方法可以让你修改el-select选中后的el-option样式。根据你的需求，你可以修改背景颜色、文字颜色等样式属性。记得将代码添加到合适的位置，并根据实际情况调整选择器和样式属性的值。