悬浮显示el-select中所有的内容及css处理文字过长时显示为多余部分省略

您可以使用 `el-scrollbar` 组件来实现悬浮显示 `el-select` 中所有的内容，同时使用 CSS 来处理文字过长时的显示效果。具体实现方法如下：

1. 首先，在 `el-select` 组件中，添加 `popper-class` 属性，并为其指定一个自定义的样式类名。例如：

<el-select placeholder="请选择" popper-class="my-popper">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

2. 然后，在页面中添加 `el-scrollbar` 组件，并为其指定一个自定义的样式类名。例如：

<el-scrollbar class="my-scrollbar">
  <div class="scroll-content">
    <ul>
      <li v-for="item in options" :key="item.value">{{ item.label }}</li>
    </ul>
  </div>
</el-scrollbar>

3. 接着，在自定义样式中，为 `my-popper` 类和 `my-scrollbar` 类添加样式。例如：

.my-popper {
  z-index: 9999; /* 设置 z-index 属性，使 popper 显示在最上层 */
}

.my-scrollbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 隐藏滚动条 */
  z-index: 9998; /* 设置 z-index 属性，使 scrollbar 显示在 popper 下层 */
}

.scroll-content {
  height: auto;
  max-height: 200px; /* 设置最大高度，超出部分会自动出现滚动条 */
  overflow-y: auto; /* 设置 y 轴方向的滚动条 */
}

.scroll-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scroll-content li {
  line-height: 40px;
  padding: 0 20px;
  cursor: pointer;
  white-space: nowrap; /* 文字不换行 */
  overflow: hidden; /* 文字超出隐藏 */
  text-overflow: ellipsis; /* 文字超出部分用省略号代替 */
}

.scroll-content li:hover {
  background-color: #f5f5f5;
}

通过这种方式，您可以轻松地为 `el-select` 组件添加悬浮显示所有内容的效果，并使用 CSS 处理文字过长时的显示效果。当选项内容过多时，会自动出现滚动条，用户可以通过滚动条来查看和选择所有内容。同时，文字过长时会显示为多余部分省略号。