快捷導(dǎo)航

ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決

更新時間：2024年08月23日 10:19:56 作者：s????菜醬

本文主要介紹了ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前幾天在開發(fā)一個需求時，無意發(fā)現(xiàn)了select超出區(qū)域el-option會浮出來問題，我整個人都不淡定了??，想著正常人應(yīng)該都不會像我這樣反人類操作吧??... 但是秉著對技術(shù)的執(zhí)著，有問題咱就迎難而上，啥大風(fēng)大浪沒見過的....

既然已經(jīng)發(fā)現(xiàn)問題，我就開始琢磨為什么會產(chǎn)生這個問題?? 頭腦風(fēng)暴中，經(jīng)過思考有了下面的見解...

1.select 默認(rèn)是插入到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;
  }
}

【效果展示】

雖然超出區(qū)域沒有浮出來，但是仔細(xì)會發(fā)現(xiàn)，el-option有時候會從底部先出往上展開，而且展開的數(shù)據(jù)如果太多需要滾動才能選擇，總的來說體驗感不太好。

第二種方法，監(jiān)聽滾動的時候，收起el-option，這也是我比較推薦的方法。

1.進(jìn)入頁面時獲取表格實例，監(jiān)聽滾動事件

  let operableTree = null;
      // 獲取表格的dom, 監(jiān)聽滾動事件
      let box = document.querySelector('.table-wrapper .el-table__body-wrapper');
      box.addEventListener(
        'scroll', () => {
          clearTimeout(operableTree);
          // 滾動時調(diào)用select 失焦的方法 為了避免一直監(jiān)聽，可以判斷是否有點(diǎn)擊選擇器
          this.selectIndex !== -1 && (operableTree = setTimeout(() => {
            this.$refs[`treeSelect-${this.selectIndex}`].blur();
            this.selectIndex = 1；
          }, 100));
        },
        false
      );
    }, 500);

2.給select添加ref標(biāo)識，添加聚焦方法handleFocus，獲取點(diǎn)擊的是哪個選擇框，表格滾動時只需要對這個選擇框進(jìn)行失焦操作。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: [], // 表格數(shù)據(jù)
      selectIndex: -1, // 點(diǎn)擊的select的位置
    };
  },

  methods: {

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

【效果展示】

到此這篇關(guān)于ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決的文章就介紹到這了,更多相關(guān)Element el-option超出元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: