Element-UI中select的下拉框popper 定位超出可视区的解决方案

本文分析并解决了在Element-UI中,当el-table含有el-select且滚动时,下拉框popper超出可视区的问题。问题源于el-popper的fixed定位和高z-index。解决方案是在表格滚动时关闭下拉框,通过监听滚动事件实现。
摘要由CSDN通过智能技术生成

一、问题描述:

当弹出框有表格el-table,el-table中有el-select,当滚动滚动条时,el-select的下拉框超出了弹出层
在这里插入图片描述

二、问题分析

产生该问题的原因是,滚动表格时,el-select的输入框被隐藏了,但是下拉框el-popper使用的定位方法是fixed,当显示时,使用的z-index非常大,因此显现在最上层,当滚动滚动条往下移动时el-popper并没有被隐藏。

三、解决方案

当表格滚动时,直接隐藏掉下拉框

四、代码

  1. 获取父级元素,并监听该元素的滚动事件,这里使用的是el-table
  2. 当父级元素中存在滚动条,则关闭select的下拉框 使用 handleClose
  <!--以下代码只有重要步骤 -->
  <el-table ref="viewBox">
  	<el-table-column>
  		<template slot-scope>
  			<el-select ref="mySelect0">
  			</el-select>
  			<el-select ref="mySelect1">
  			</el-select>
  			<el-select ref="mySelect2
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值