前端-巧妙解决滚动时el-option超出元素区域的问题

前几天在开发一个需求时，无意发现了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 ~~