ElementUI当鼠标悬停在下拉框选项时，显示此选项的说明文字

需求

鼠标悬停在下拉框选项时，显示此选项的说明文字 。

分析

使用 @mouseover.native 触发显示消息框。 使用 @mouseout.native 关闭消息框

前端实现

消息框

<el-popover
          v-model="tooltipDisableFlag"
          placement="top-start"
          style="width: 100%;"
          trigger="focus"
          :content="popoverContent"
        />

下拉框

<el-form-item :label="$t('dict.generator')" :label-width="formLabelWidth" prop="dict_generator" :rules="rules.generator">
        <el-select v-model="temp.dict_generator" style="width:95%" class="filter-item" :placeholder="$t('dict.generatorIntro')" filterable @change="changedict">
          <el-option
            v-for="item in genOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @mouseover.native="setMouseOver($event)"
            @mouseout.native="setMouseOut()"
          />
        </el-select>
      </el-form-item>

data()中定义，消息框中使用的变量

data() {
return {
        popoverContent: ''
        }
    }

methods 中定义 方法

	setMouseOver: function($event) {
        this.tooltipDisableFlag = true
        const selectedOption = $event.currentTarget.innerText
        for (const e in this.genOptions) {
          if (selectedOption === this.genOptions[e].name) {
            this.popoverContent = this.genOptions[e].doc
          }
        }
      },
      setMouseOut() {
        this.tooltipDisableFlag = false
      },
      // 初始化 genOptions , msgOptions
      initSelect() {
        // init the list of dict type
        fetchTypeList().then(response => {
          const tempoption = response.data.items
          for (const e in tempoption) {
            tempoption[e].label = tempoption[e].name
            tempoption[e].value = e
          }
          this.genOptions = tempoption
        })
      },