el-select框在页面滚动时el-option超出元素区域的解决方法

问题场景：

• 页面内嵌了表格（含滚动条），内嵌了大量input和select。
• 点击select出现下拉框时，正常的情况是图1，但是在滚动表格内的滚动条时，会出现图二的情况。

导致原因：

• select的下拉框的元素标签不是跟随在select之后，而是在body标签下面，并且z-index的值比select小。

解决方法：

• 将select的下拉框的元素标签放在select之后，并将z-index的值设置为比select大。

具体步骤：

1. 找到select元素的HTML代码。
2. 在select元素的后面添加一个div元素。
3. 在div元素中添加el-option元素。
4. 设置div元素的position属性为absolute。
5. 设置div元素的top属性为0。
6. 设置div元素的left属性为0。
7. 设置div元素的z-index属性为比select大的值。

示例代码：

<el-select>
  <el-option label="选项1" value="1"></el-option>
  <el-option label="选项2" value="2"></el-option>
  <el-option label="选项3" value="3"></el-option>
</el-select>

<div style="position: absolute; top: 0; left: 0; z-index: 100;">
  <el-option-group label="分组1">
    <el-option label="选项4" value="4"></el-option>
    <el-option label="选项5" value="5"></el-option>
  </el-option-group>

  <el-option-group label="分组2">
    <el-option label="选项6" value="6"></el-option>
    <el-option label="选项7" value="7"></el-option>
  </el-option-group>
</div>

效果：

按照上述步骤操作后，下拉框将跟随select一起滚动，不会超出元素区域。

注意事项：

• 如果下拉框的内容较多，则需要调整div元素的高度。
• 如果下拉框的位置需要改变，则需要调整div元素的top和left属性。

总结：

通过将select的下拉框的元素标签放在select之后，并将z-index的值设置为比select大，可以解决el-select框在页面滚动时el-option超出元素区域的问题。