快捷導(dǎo)航

ElementUi中select框在頁(yè)面滾動(dòng)時(shí)el-option超出元素區(qū)域的問(wèn)題解決

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

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

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

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

1.select 默認(rèn)是插入到body元素的，因?yàn)樗麑蛹?jí)很高，所以滾動(dòng)時(shí)el-option 會(huì)浮出來(lái)

2.那是不是把popper-append-to-body 改為false 就可以了呢？答案是不行，因?yàn)闀?huì)被外面父盒子的overflow: hidden隱藏掉。

??思考片刻后，我嘗試了兩種方式去解決這種問(wèn)題^ _ ^

第一種方法

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ū)域沒(méi)有浮出來(lái)，但是仔細(xì)會(huì)發(fā)現(xiàn)，el-option有時(shí)候會(huì)從底部先出往上展開(kāi)，而且展開(kāi)的數(shù)據(jù)如果太多需要滾動(dòng)才能選擇，總的來(lái)說(shuō)體驗(yàn)感不太好。

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

1.進(jìn)入頁(yè)面時(shí)獲取表格實(shí)例，監(jiān)聽(tīng)滾動(dòng)事件

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

2.給select添加ref標(biāo)識(shí)，添加聚焦方法handleFocus，獲取點(diǎn)擊的是哪個(gè)選擇框，表格滾動(dòng)時(shí) 只需要對(duì)這個(gè)選擇框進(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框在頁(yè)面滾動(dòng)時(shí)el-option超出元素區(qū)域的問(wèn)題解決的文章就介紹到這了,更多相關(guān)Element el-option超出元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: