element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦)
更新時間：2024年07月02日 11:47:55 作者：小墨魚_z
項目開發(fā)過程中發(fā)現(xiàn)el-select和el-date-picker彈出框顯示時候,滾動屏幕,導(dǎo)致彈出框定位出現(xiàn)問題,這篇文章主要介紹了element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦),需要的朋友可以參考下
問題描述：
項目開發(fā)過程中發(fā)現(xiàn)el-select和el-date-picker彈出框顯示時候，滾動屏幕，導(dǎo)致彈出框定位出現(xiàn)問題。
首先考慮到看一下element-ui官網(wǎng)提供的api，如下圖
1、select提供了popper-append-to-body屬性的配置
代碼如下：
<el-select v-model="value" placeholder="請選擇" :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>有時候popper-append-to-body和append-to-body設(shè)置成false不生效，此時需要找到el-select對應(yīng)的父節(jié)點設(shè)置樣式：overflow:inherit !important
到此這篇關(guān)于element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦)的文章就介紹到這了,更多相關(guān)element-ui el-select下拉框el-date-picker彈出框定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue.js 父向子組件傳參的實例代碼,需要的朋友可以參考下2017-10-10
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過設(shè)置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下2024-02-02
有時候,頻繁調(diào)用的函數(shù),我們需要把它掛載在全局的vue原型上,方便調(diào)用,這篇文章主要為大家詳細(xì)介紹了Vue中掛載全局的具體操作,需要的可以參考下2024-03-03
這篇文章主要介紹了vue2.0 路由模式mode="history"的作用，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
Vue?uni-app框架實現(xiàn)上拉加載下拉刷新功能
uni-app是一個使用Vue.js(opens?new?window)開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺2022-09-09
本篇文章主要介紹了利用VUE框架，實現(xiàn)列表分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-01-01
vue3數(shù)據(jù)可視化實現(xiàn)數(shù)字滾動特效代碼
這篇文章主要介紹了vue3數(shù)據(jù)可視化實現(xiàn)數(shù)字滾動特效,實現(xiàn)思路是使用Vue.component定義公共組件，使用window.requestAnimationFrame（首選，次選setTimeout）來循環(huán)數(shù)字動畫，詳細(xì)代碼跟隨小編一起看看吧2022-09-09
vue2和vue3中provide/inject的基本用法示例
Vue中的provide/inject是一種組件間通信的方式,它允許父組件向子組件傳遞數(shù)據(jù),而不需要通過props或事件來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue2/vue3中provide/inject的基本用法的相關(guān)資料,需要的朋友可以參考下2023-04-04
解決vue+webpack項目接口跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue+webpack項目接口跨域出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue項目中添加鎖屏功能的實現(xiàn)思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06