ElementUi中select框在页面滚动时el-option超出元素区域的问题解决

// 添加 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>

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

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

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

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