快捷導(dǎo)航

element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦)

更新時(shí)間：2024年07月02日 11:47:55 作者：小墨魚_z

項(xiàng)目開發(fā)過程中發(fā)現(xiàn)el-select和el-date-picker彈出框顯示時(shí)候,滾動(dòng)屏幕,導(dǎo)致彈出框定位出現(xiàn)問題,這篇文章主要介紹了element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦),需要的朋友可以參考下

問題描述：

項(xiàng)目開發(fā)過程中發(fā)現(xiàn)el-select和el-date-picker彈出框顯示時(shí)候，滾動(dòng)屏幕，導(dǎo)致彈出框定位出現(xiàn)問題。

首先考慮到看一下element-ui官網(wǎng)提供的api，如下圖

1、select提供了popper-append-to-body屬性的配置

代碼如下：

<el-select v-model="value" placeholder="請(qǐng)選擇" :popper-append-to-body="false">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

2、el-date-picker提供了append-to-body屬性的配置

代碼如下：

<el-date-picker
      v-model="value1"
      type="date"
      placeholder="選擇日期"
      :append-to-body="false"
>
</el-date-picker>

有時(shí)候popper-append-to-body和append-to-body設(shè)置成false不生效，此時(shí)需要找到el-select對(duì)應(yīng)的父節(jié)點(diǎn)設(shè)置樣式：overflow:inherit !important

到此這篇關(guān)于element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦)的文章就介紹到這了,更多相關(guān)element-ui el-select下拉框el-date-picker彈出框定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue.js 父向子組件傳參的實(shí)例代碼
這篇文章主要介紹了vue.js 父向子組件傳參的實(shí)例代碼,需要的朋友可以參考下
2017-10-10
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過設(shè)置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下
2024-02-02
Vue中掛載全局的方法詳解
有時(shí)候,頻繁調(diào)用的函數(shù),我們需要把它掛載在全局的vue原型上,方便調(diào)用,這篇文章主要為大家詳細(xì)介紹了Vue中掛載全局的具體操作,需要的可以參考下
2024-03-03
vue2.0 路由模式mode="history"的作用
這篇文章主要介紹了vue2.0 路由模式mode="history"的作用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-10-10
Vue?uni-app框架實(shí)現(xiàn)上拉加載下拉刷新功能
uni-app是一個(gè)使用Vue.js(opens?new?window)開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)
2022-09-09
利用VUE框架，實(shí)現(xiàn)列表分頁功能示例代碼
本篇文章主要介紹了利用VUE框架，實(shí)現(xiàn)列表分頁功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-01-01
vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效代碼
這篇文章主要介紹了vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效,實(shí)現(xiàn)思路是使用Vue.component定義公共組件，使用window.requestAnimationFrame（首選，次選setTimeout）來循環(huán)數(shù)字動(dòng)畫，詳細(xì)代碼跟隨小編一起看看吧
2022-09-09
vue2和vue3中provide/inject的基本用法示例
Vue中的provide/inject是一種組件間通信的方式,它允許父組件向子組件傳遞數(shù)據(jù),而不需要通過props或事件來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue2/vue3中provide/inject的基本用法的相關(guān)資料,需要的朋友可以參考下
2023-04-04
解決vue+webpack項(xiàng)目接口跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue+webpack項(xiàng)目接口跨域出現(xiàn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue項(xiàng)目中添加鎖屏功能實(shí)現(xiàn)思路
這篇文章主要介紹了Vue項(xiàng)目中添加鎖屏功能的實(shí)現(xiàn)思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06