el-select 悬浮显示超出没显示的内容

如果 `el-select` 组件中的选项内容过多，超出了组件的显示范围，可以使用 `el-scrollbar` 组件来实现悬浮显示超出没显示的内容。具体实现方法如下：

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;
}

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

通过这种方式，您可以轻松地为 `el-select` 组件添加悬浮显示超出没显示的内容的效果。当选项内容超出组件显示范围时，会自动出现滚动条，用户可以通过滚动条来查看和选择超出部分的内容。