el-select @change 后实现失去焦点

可以在@change事件中添加失去焦点的方法，例如：

<el-select v-model="selected" @change="handleChange">
  <el-option label="选项1" value="1"></el-option>
  <el-option label="选项2" value="2"></el-option>
</el-select>

...

methods: {
  handleChange() {
    this.$nextTick(() => {
      this.$refs.select.blur();
    });
  }
}

在@change事件中调用$nextTick方法，等待DOM更新后再让el-select失去焦点。这样可以确保在选中选项后再失去焦点。

相关问题

如何给以下代码的输入框中设置空值的时候，失去焦点框下面有红色的提示，<el-row> <!--分组--> <el-col :span="24"> <el-form-item label="模板名称" prop="name"> <el-input v-model="form.name" placeholder="请输入模板名称" /> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="分组名称" prop="groupId"> <treeselect v-model="form.groupId" :options="groupOptions.length ? groupOptions[0].children : []" :normalizer="normalizer" placeholder="请选择分组名称" /> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="分辨率" prop="resolution"> <el-select @change="handleResolutionChange" v-model="form.resolution" placeholder="请输入分辨率"> <el-option v-for="it in resolutionList" :key="it" :label="it" :value="it" /> </el-select> </el-form-item> </el-col>

你可以使用 Element UI 中的表单验证功能来实现该需求。具体实现步骤如下：

1. 在 el-form-item 标签上添加 prop 属性，该属性用于标识当前表单项的唯一标识符。

2. 在 el-form-item 标签上添加 rules 属性，该属性是一个数组，用于设置当前表单项的验证规则。

3. 在 rules 数组中添加一个对象，该对象中包含一个 required 属性，该属性的值设置为 true，表示当前表单项必填。

4. 在 el-input 组件上添加 @blur 事件，在该事件中调用表单的 validateField 方法来触发当前表单项的验证。

5. 在 el-form-item 标签上添加 :error 属性，该属性用于控制当前表单项是否验证通过，当验证不通过时，该属性设置为 true，此时表单项下方会出现红色的提示信息。

示例代码如下：

<el-row>
  <el-col :span="24">
    <el-form-item label="模板名称" prop="name" :rules="[{ required: true, message: '请输入模板名称', trigger: 'blur' }]">
      <el-input v-model="form.name" placeholder="请输入模板名称" @blur="$refs.form.validateField('name')" :error="$refs.form.fields.name.error"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="分组名称" prop="groupId" :rules="[{ required: true, message: '请选择分组名称', trigger: 'blur' }]">
      <treeselect v-model="form.groupId" :options="groupOptions.length ? groupOptions[0].children : []" :normalizer="normalizer" placeholder="请选择分组名称" @blur="$refs.form.validateField('groupId')" :error="$refs.form.fields.groupId.error"></treeselect>
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="分辨率" prop="resolution" :rules="[{ required: true, message: '请输入分辨率', trigger: 'blur' }]">
      <el-select @change="handleResolutionChange" v-model="form.resolution" placeholder="请输入分辨率" @blur="$refs.form.validateField('resolution')" :error="$refs.form.fields.resolution.error">
        <el-option v-for="it in resolutionList" :key="it" :label="it" :value="it" />
      </el-select>
    </el-form-item>
  </el-col>
</el-row>

其中，$refs.form.validateField('name') 表示调用表单的 validateField 方法来验证名称表单项；$refs.form.fields.name.error 表示当前名称表单项是否验证不通过。其他表单项类似。

el-select的change

el-select的change事件可以通过两种方式来使用。第一种方式是在select标签上添加@change="change"，并在methods中定义change方法来处理事件。例如：

<el-select @change="change" v-model="value1" placeholder="请选择">
  <el-option @focus="get1()" v-for="item in list2" :key="item.code + item.name" :label="item.code + item.name" :value="item.code + item.name"></el-option>
</el-select>

其中，change方法可以通过传入的事件对象e来获取对应的值。

第二种方式是在select标签上添加@change="change($event)"，并在methods中定义change方法来处理事件。例如：

<el-select @change="change($event)" v-model="value1" placeholder="请选择">
  <el-option @focus="get1()" v-for="item in list2" :key="item.code + item.name" :label="item.code + item.name" :value="item.code + item.name"></el-option>
<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
-  *1* [el-select实现change](https://blog.csdn.net/weixin_45336090/article/details/128223034)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
-  *2* *3* [elementUI中下拉选择器el-select中Select Events事件 change 方法参数两种使用 和option的focus触发焦点](https://blog.csdn.net/m0_49714202/article/details/122826148)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]