代码编织梦想

前几天在开发一个需求时,无意发现了select超出区域el-option会浮出来问题,我整个人都不淡定了😱,想着正常人应该都不会像我这样反人类操作吧😅... 但是秉着对技术的执着,有问题咱就迎难而上,啥大风大浪没见过的....

既然已经发现问题,我就开始琢磨为什么会产生这个问题🤔 头脑风暴中,经过思考有了下面的见解...

  • 1.select 默认是插入到body元素的,因为他层级很高,所以滚动时el-option 会浮出来

  • 2.那是不是把popper-append-to-body 改为false 就可以了呢?答案是不行,因为会被外面父盒子的overflow: hidden隐藏掉。

🤔思考片刻后,我尝试了两种方式去解决这种问题,如果各位大佬有更好的方法,欢迎评论区指点下哟^ _ ^

***第一种方法

 1.select添加 popper-append-to-body 为false


// 添加 popper-append-to-body 为false
 <el-select v-model="row.attribute_id"
                                 :popper-append-to-body="false"
                                 @change="handleDiscountAttribute(row)">
                        <el-option v-for="(attr,aIdx) in row.attributeOption"
                                   :key="aIdx"
                                   :label="attr.attribute_name"
                                   :value="attr.id" />
                      </el-select>

2.修改element table的底层样式 


/deep/.table-wrapper {
  border: 1px solid #e9ecf0;
  border-bottom: 0;

// 修改element的底层样式
  .cell {
    overflow: visible;
  }
  .el-table__body-wrapper {
    overflow: overlay;
  }
}

【效果展示】

虽然超出区域没有浮出来,但是仔细会发现,el-option有时候会从底部先出往上展开,而且展开的数据如果太多需要滚动才能选择,总的来说体验感不太好。

***第二种方法 ,监听滚动的时候,收起el-option,这也是我比较推荐的方法。

1.进入页面时获取表格实例,监听滚动事件

  let operableTree = null;
      // 获取表格的dom, 监听滚动事件
      let box = document.querySelector('.table-wrapper .el-table__body-wrapper');
      box.addEventListener(
        'scroll', () => {
          clearTimeout(operableTree);
          // 滚动时调用select 失焦的方法 为了避免一直监听,可以判断是否有点击选择器
          this.selectIndex !== -1 && (operableTree = setTimeout(() => {
            this.$refs[`treeSelect-${this.selectIndex}`].blur();
            this.selectIndex = 1;
          }, 100));
        },
        false
      );
    }, 500);

2.给select添加ref标识,添加聚焦方法handleFocus,获取点击的是哪个选择框,表格滚动时 只需要对这个选择框进行失焦操作。this.$refs[`treeSelect-${this.selectIndex}`].blur();

    <el-table :data="tableData"
                          max-height="550"
                          class="table-wrapper">
                  <el-table-column label="商品属性"
                                   width="250">
                    <template v-slot="{row, $index}">
                       <!-- select 增加ref -->
                      <el-select :ref="`treeSelect-${$index}`"
                                 v-model="row.attribute_id"
                                 @focus="handleFocus(row, $index)"
                                 @change="handleDiscountAttribute(row)">
                        <el-option v-for="(attr,aIdx) in row.attributeOption"
                                   :key="aIdx"
                                   :label="attr.attribute_name"
                                   :value="attr.id" />
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>



  data() {
    return {
      tabeleData: [], // 表格数据
      selectIndex: -1, // 点击的select的位置
    };
  },

  methods: {

    handleFocus(e, index) {
      this.selectIndex = index;
    },
      
  }

【效果展示】

~~ END ~~ 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/SuperJane_123/article/details/135818277

element-ui中 元素滚动时el-option超出元素区域的问题_weixin_30404405的博客-爱代码爱编程

复现场景, 看图 分析原因 为简单起见, 把选项区域描述为popperEl popperEl的z-index 比较大, 会覆盖在其他元素上面popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body)popperEl是在mouseup事件里去做隐藏逻辑的

elinput内容过长显示悬浮框_Element-ui中元素滚动时el-option超出元素区域的问题-爱代码爱编程

复现场景, 看图 分析原因 为简单起见, 把选项区域描述为popperEl popperEl的z-index 比较大, 会覆盖在其他元素上面 popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body) popperEl是在mouseup事件里去做隐藏逻辑的, 而按下鼠标,

element 动态加载下拉框_在element-ui的select下拉框加上滚动加载-爱代码爱编程

在项目中,我们需要运用到很多来自后端返回的数据。有时是上百条,有时甚至上千条。如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此。 自然,后端就做了一项非常“漂亮”的交互体验数据——分页 这不分页还好,一分页对超过10条数据之后的本来也不多,就20条,偏偏还得做个分页器。(假设为10条) 此时,如

Element ui 选择器选项超出选择框-爱代码爱编程

Element ui 选择器进行多选时,选择项若比所设置的框体宽,默认不会自动换行,这样的话,界面样式会不好看,解决办法是加个样式 代码: <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"

html 下拉框超出页面,关于ElementUi中select框在页面滚动时el-option超出元素区域的问题...-爱代码爱编程

问题:在项目开发中发现elementUi中的select组件在页面滚动时会随着页面滚动并遮盖页面,如下图: 遇到这问题首先想到的是组件是否有相关设置属性,发现popper-append-to-body属性发现不行。 在网上找到了相关的解决办法,在下面贴出来!!! 1、创建js文件 // fackClickOutSide.js let lo

VUE中显示范围有限,元素滚动时el-option超出元素显示范围-爱代码爱编程

首先感谢在遇到问题时搜索到的一些答案,同时指路优秀文章:Element-ui中 元素滚动时el-option超出元素区域的问题 - 掘金 (juejin.cn) 小编遇到的问题和链接中楼主的问题几乎是同一个问题,奈何小编才疏学浅,看不太懂,只能用笨方法来解决问题啦。 先看问题还原图:   问题描述: 中间红色框的范围为文件的可显

ElementUi中select框在页面滚动时el option超出元素区域的问题-爱代码爱编程

问题:在项目开发中发现elementUi中的select组件在页面滚动时会随着页面滚动并遮盖页面,如下图:   遇到这问题首先想到的css,但是没有知道好的解决方法, 在网上找到了相关的解决办法,在下面贴出来!!! 1、创建js文件 // fackClickOutSide.js let lock = true; let el = nu

关于element ui el-select组件滚动条与原生滚动条冲突-爱代码爱编程

公司用element ui 搭建一个页面,发现一个bug,el-select组件的股东条会与原生的滚动条发生冲突,当el-select组件的选项过多出现滚动条,会出现滑动el-select组件内内容,但是没有滑动,而是滑动了主页面,而且这种bug没有规律,会让客户体验十分不友好。   我前期的解决思路一直以为我是设置了什么属性导致的,但后来我直接去ele

解决element-ui中select下拉框popper超出弹框问题_w643462659的博客-爱代码爱编程

记录一下 使用el-select el-select-dropdown 超出弹框 网上找了一些方法,控制滚动关闭弹框,用了一下不太理想,当el-select-dropdown 中有滚动条会出现直接关闭,然后试了一下修改pop

elementui 下拉框出现脱离 超出弹框解决方案_jikel的博客-爱代码爱编程

出现原因 : 父盒子弹框因为内容过多只能设置隐藏滚动的效果,但是elementui 下拉框的z-index权重最高,会出现脱离或者超出弹框的现象. 如果调低权重,则会出现节点被弹框覆盖的情况 解决方案 经过观察,el

通过自定义指令,解决弹窗内容滚动时el-select下拉框,超出显示范围问题.-爱代码爱编程

问题描述 elementUi的el-select下拉选择框,打开之后除非失去焦点或者获取到对应dom关闭,不然不会自动关闭.在有滚动条de弹窗中使用时就会出现打开下拉框,滚动弹窗,el-select下拉框超出弹窗

element-爱代码爱编程

本文是转载一位前辈的文章,原文链接:https://blog.csdn.net/Alan_Walker1/article/details/129840321 我们用elementui 多选下拉选框长度固定的情况下,选择多个长度时会强制撑开高度,那么怎么让他不换行、不撑开,而是超过的长度显示省略呢?         首先给el-select一个class