el-select实现鼠标悬浮在选项上显示其他项的信息

使用 @mouseover.native  实现鼠标悬浮在下拉选项上显示其他项的信息

使用 @mouseleave.native 实现鼠标离开下拉框时清除其他项的信息

          <el-select
            v-model="formData.value1"
            placeholder="请选择"
            @blur="handleBlur"
          >
            <el-option
              v-for="(item, index) in optionList"
              :key="item.id"
              :value="item.value1"
              :label="item.value1"
              @mouseover.native="showChoice(item)"
              @mouseleave.native="clearChoice"
            >
            </el-option>
          </el-select>

optionList数据的格式

const optionList = [{
    id:1,
    value1:'A',
    value2:'B',
    value3:'C',
    value4:'D'
},{
    id:2,
    value1:'AA',
    value2:'BB',
    value3:'CC',
    value4:'DD'    
},{
    id:3,
    value1:'AAA',
    value2:'BBB',
    value3:'CCC',
    value4:'DDD'
}]

formData数据格式

let formData = {
    value1:''
    value2:''
    value3:''
    value4:''
}

编写鼠标进入下拉选项的事件

// 预显示选择项
  showChoice(data: any) {
    formData.value1 = data.value1; //该项的字段数据
    formData.value2 = data.value2; //其他项的字段数据
    formData.value3 = data.value3; //其他项的字段数据
    formData.value4 = data.value4; //其他项的字段数据
  }

编写鼠标离开下拉选项的事件

// 清除预显示选择项
  clearChoice(data: any) {
    formData.value1 = ''; //该项的字段数据
    formData.value2 = ''; //其他项的字段数据
    formData.value3 = ''; //其他项的字段数据
    formData.value4 = ''; //其他项的字段数据
  }