卖机械设备什么网站做推广好,做机械有什么兼职网站,流量平台,秦皇岛商联网络科技有限公司场景
有天边上的同事问了我一个问题#xff0c;示例如下#xff0c;有个数据特别长#xff0c;导致下拉部分被横向撑大。希望在全局对所有的option进行处理#xff0c;按照select的宽度#xff0c;超出隐藏。
处理
方式一
第一眼看过去直接修改源码好了#xff0c;修…场景
有天边上的同事问了我一个问题示例如下有个数据特别长导致下拉部分被横向撑大。希望在全局对所有的option进行处理按照select的宽度超出隐藏。
处理
方式一
第一眼看过去直接修改源码好了修改一下样式再配合patch-package做一个补丁包即可。
方式二
转念一想要么直接覆盖原有的el-option组件呗。拷贝option.vue文件到本地按要求修改完成后将其注册为全局组件保持命名一致即可
方式三
添加一个鼠标事件监听手动添加title属性有一丢丢延迟
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想要全局处理那直接扩展一个功能吧 示例如下
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)}
})再加个样式看一下效果完美解决
