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

最新推荐文章于 2024-03-08 17:31:25 发布

_Minato_

最新推荐文章于 2024-03-08 17:31:25 发布

阅读量1.3k

点赞数 10

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/omroji/article/details/135625690

版权

本文介绍了如何在Vue.js的ElementUI组件中，通过`mouseover.native`和`mouseleave.native`事件，实现在用户鼠标悬停和离开下拉选项时动态显示和清除其他选项的数据。

摘要由CSDN通过智能技术生成

使用 @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 = ''; //其他项的字段数据
  }