elementui-plus 使用 select 時會出現錯誤

如題,直接在畫面中使用<el-select>組件,網頁會跳紅字出錯,TypeError: Cannot read property '__disableEmitter' of undefined,推測應該是因為<el-select>組件是把 dom 放在body裡面,而不是#app裡,所以你在做一些操作(例如:router 換頁)時,就會出現預期以外的錯誤。


第一步的解決方法:

popper-append-to-body參數設置為false,這樣你的body就會保持乾淨,裡面只有一個#app,可以暫時解決 router 的衝突。

 <el-select
  placeholder="請選擇"
  :popper-append-to-body="false" //加入這行
  v-model="form.type"
>
  <el-option
    v-for="i in types"
    :key="i"
    :label="i.name"
    :value="i.id"
  />
</el-select>

 

這麼做會產生另一個問題,因為現在<el-select>組件不在#app外面了,所以他很有可能會被其他更高層級的dom擋住。

像是如果你把它放在 card 裡,或是放在 collapse 裡,他都會因為父層的overflow: hidden而被擋住。

這時候可以手動把父層的overflow<el-select>點選打開的時候設定為visible

<el-collapse-item
  :class="{ visible: showOptions }"
>
  <el-select
    placeholder="請選擇"
    :popper-append-to-body="false"
    v-model="form.type"
    @visible-change="onSelectOptionsShow"
  >
...
  </el-select>
</el-collapse-item>
setup() {
  const states = reactive({
    showOptions: false,
  });

  const onSelectOptionsShow = (visible) => {
    states.showOptions = visible;
  };

  return {
    states,
    onSelectOptionsShow,
  };
}
.el-card.visible,
/deep/.el-collapse-item.visible .el-collapse-item__wrap {
  overflow: visible !important;
}

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。