elementui全局给select option添加title属性

场景

有天边上的同事问了我一个问题,示例如下,有个数据特别长,导致下拉部分被横向撑大。希望在全局对所有的option进行处理,按照select的宽度,超出隐藏。

处理

方式一

第一眼看过去直接修改源码好了,修改一下样式,再配合patch-package做一个补丁包即可。

方式二

转念一想,要么直接覆盖原有的el-option组件呗。拷贝option.vue文件到本地,按要求修改完成后,将其注册为全局组件,保持命名一致即可

方式三

添加一个鼠标事件监听,手动添加title属性(有一丢丢延迟)

js 复制代码
document.addEventListener('mouseenter', e => {
  var event = e || window.event;
   var target = event.target || event.srcElement;
   if (target.className.indexOf('el-select-dropdown__item') > -1) {
     target.setAttribute("title", target.children[0].innerHTML);
   }
 }, true)

方式四

同事看了一眼说这几种方法不够优雅,有什么更高大上点的处理方式吗?我想了一下,行吧,直接掏箱底。

element-ui源码上看,el-option绑定的是currentLabel,想要全局处理,那直接扩展一个功能吧

示例如下

js 复制代码
import Vue from 'vue'
import ElementUI from 'element-ui';

Vue.component('el-option', {
  extends: ElementUI.Option,
  mounted(){
  	// 当option挂载时,设置一个title属性
    this.$el.setAttribute('title',this.currentLabel)
  }
})

再加个样式,看一下效果,完美解决

相关推荐
小小小小宇4 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习5 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css