vue3 el-select 下拉框选项文字内容过长

一、问题描述

问题：option选项内容多，导致弹出框过长，甚至超出屏幕，如下：

二、解决方案：

方案一：查找到了一些资料，鼠标移上去就用tooltip显示el-option的内容

但是如果下拉框内容比较多，会出现下面的遮挡情况

虽然消失的也很快，体验上有一种说不出的感觉，ummm🤔，可能是因为不是所有的内容都有那么长？换句话说，不需要所有的内容都显示tooltip，那限制一下内容的长度？但是这个度我没有想到好的办法去把握，考虑到两点问题：

1.如果单纯的判断内容的length，中文和英文的长度、和数字的长度在宽度上的占比是不一样的，🤔，参见👇

2.屏幕大小改变后，option的显示长度也会被改变，用.length判断方法就不适用了

方案二：单条option内容添加滚动条

其实也可以整个滚动，但是

如果少数的数据比较长，那横向滚动后，只有这一条数据可见，🤔

最后===算了，单条滚动吧；

step1:先给option加样式class="option-content"

 <el-option v-for="item in deviceIssueList" :key="item.depIssueId" :label="item.issueTitle" :value="item.depIssueId">
      <span class="option-content">{{ item.issueTitle }}</span>
 </el-option>
    
    
 .option-content {
  padding-right: 12px; // 右侧间距控制
}

step2:具体样式

// 控制option的宽度与select等宽
.el-select ::v-deep .popper-class {
  width: 100%;
}

// 添加样式以支持横向滚动条
.el-select-dropdown__item {
  white-space: nowrap;
  overflow-x: auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

然后就变成这样了👇，下拉框和select等宽，溢出添加滚动条

但是滚动条比较显眼👀，所以最后选择隐藏滚动条👇

// 隐藏滚动条 兼容safare和谷歌
.el-select-dropdown__item::-webkit-scrollbar {
  display: none;
}