前端使用 element-ui组件库的下拉选择，选择行业，可以过滤；需求如下： 1.当用户未选择任何内容时，则提示第1条文案； 2.当用户输入了行业名称，但未点击回车或点击下拉列表中的某 项以示确认，或所输入的行业名称不在下 拉列表中，同时鼠标焦点离开了此下拉框，则要针对此情况进行判断，并提示第2条文案 文案内容如下： 1.请选择设备所属行业； 2.请从下拉列表中选择设备所属行业 请问怎么实现提出的需求。

实现 Element UI 下拉选择需求

• 需求概述：使用 Element UI 实现下拉选择组件，根据用户操作提供相应提示文案。

步骤一：设置初始状态

• 要点关键词：初始提示文案
• 概要正文：在下拉选择组件未被操作前，显示第一条提示文案"请选择设备所属行业"。

步骤二：监听用户输入

• 要点关键词：输入监听
• 概要正文：使用 Element UI 的 input 事件监听用户输入，当用户开始输入时，清空第一条提示文案。

步骤三：判断用户选择

• 要点关键词：选择确认
• 概要正文：通过监听 change 或 blur 事件，判断用户是否从下拉列表中选择了有效项。如果未选择或输入不匹配，则显示第二条提示文案"请从下拉列表中选择设备所属行业"。

步骤四：实现动态提示

• 要点关键词：动态提示逻辑
• 概要正文：结合步骤二和步骤三，实现当用户输入但未确认选择时动态显示第二条提示文案的逻辑。

代码示例

<template>
  <el-select v-model="selectedValue" placeholder="请选择设备所属行业" @input="onInput" @change="onChange" @blur="onBlur">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: null,
      inputText: '',
      promptMessage: '请选择设备所属行业'
    };
  },
  methods: {
    onInput(value) {
      this.inputText = value;
      // 用户输入时清空提示文案
      this.promptMessage = '';
    },
    onChange(value) {
      if (value) {
        // 用户已选择有效项
        this.promptMessage = '';
      } else {
        // 用户未选择有效项
        this.promptMessage = '请从下拉列表中选择设备所属行业';
      }
    },
    onBlur() {
      if (!this.selectedValue && this.inputText) {
        // 用户输入了内容但未选择
        this.promptMessage = '请从下拉列表中选择设备所属行业';
      }
    }
  }
};
</script>

• 要点关键词：代码实现
• 概要正文：以上代码示例展示了如何使用 Element UI 的事件监听和数据绑定来实现需求中描述的逻辑。35