在el-select中使用title 鼠标移入出现选中后的提示

最新推荐文章于 2025-02-25 13:36:38 发布

前端小宋

最新推荐文章于 2025-02-25 13:36:38 发布

阅读量3.3k

点赞数 3

文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/weixin_46069849/article/details/120543141

版权

该博客介绍了如何在Vue项目中利用el-select组件的title属性动态显示选项内容。通过方法`getClassOptionTitle`，根据`plannedClassNumberOption`数组过滤并获取对应的label，实现下拉框选择时的自定义提示信息。同时，文章展示了相关代码片段，包括v-model绑定、change事件监听等，展示了一个完整的el-select用例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在el-select中使用title属性

<template slot-scope="scope">
	<el-select
	   style="width: 172px"
	   :disabled="loginUser === 'AREA_ADMIN' ? false : true"
	   :title="getClassOptionTitle(scope.row.plannedClassNumber)"
	   v-model="scope.row.plannedClassNumber"
	   placeholder="请选择"
	   @change="selectChangeValue(scope.row)"
	 >
	   <el-option
	     v-for="val in plannedClassNumberOption"
	     :key="val.value"
	     :label="val.label"
	     :value="val.value"
	   >
	   </el-option>
	 </el-select>
 <template slot-scope="scope">

在方法中返回显示内容

// data中定义plannedClassNumberOption数组 从后端取数据
getClassOptionTitle(val, type) {
  if(val !== '') {
    let result = this.plannedClassNumberOption.filter(item => item.value === val)
    if(result.length > 0) {
      return result[0].label
    }
  }
}