element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦)
更新時間：2024年07月02日 11:47:55 作者：小墨魚_z
項目開發(fā)過程中發(fā)現(xiàn)el-select和el-date-picker彈出框顯示時候,滾動屏幕,導致彈出框定位出現(xiàn)問題,這篇文章主要介紹了element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦),需要的朋友可以參考下
問題描述：
項目開發(fā)過程中發(fā)現(xiàn)el-select和el-date-picker彈出框顯示時候，滾動屏幕，導致彈出框定位出現(xiàn)問題。
首先考慮到看一下element-ui官網提供的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設置成false不生效，此時需要找到el-select對應的父節(jié)點設置樣式：overflow:inherit !important
到此這篇關于element-ui el-select下拉框el-date-picker彈出框定位問題解決方案(推薦)的文章就介紹到這了,更多相關element-ui el-select下拉框el-date-picker彈出框定位內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在現(xiàn)代前端開發(fā)中,Vue3和Vite的組合已經成為許多開發(fā)者的首選,這篇文章主要介紹了Vue3+TypeScript項目架構實踐的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-02-02
最近做時速云項目部署,需要將前端項目打成鏡像文件,下面這篇文章主要給大家介紹了關于Vue項目打包成Docker鏡像包的簡單步驟,需要的朋友可以參考下2023-10-10
在Vue中實現(xiàn)放大鏡效果,主要是為了增強用戶體驗,讓用戶在查看商品圖片時能更清晰地觀察細節(jié),這篇文章主要介紹了vue3圖片放大鏡效果實現(xiàn)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-11-11
vue3.0+element Plus實現(xiàn)頁面布局側邊欄菜單路由跳轉功能
這篇文章主要介紹了vue3.0+element Plus實現(xiàn)頁面布局，側邊欄菜單路由跳轉,需要的朋友可以參考下2023-07-07
vue.js通過自定義指令實現(xiàn)數據拉取更新的實現(xiàn)方法
數據拉取更新這個功能相信大家基本都見過，但是如果要做起來卻不止如何做起，所以這篇文章給大家分享了vue.js通過自定義指令實現(xiàn)的方法，閱讀本文需要對vue有一定理解，有需要的朋友們下面來一起看看吧。2016-10-10
這篇文章主要介紹了vue如何實現(xiàn)垂直居中，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
map()函數定義在JS的array中,它返回一個新的數組,下面這篇文章主要給大家介紹了關于Vue中map()的用法案例,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
在vue項目中使用動畫其實有多種方式，可以使用vue中的過渡transition，可以使用animate動畫與transition配合使用，也可以單獨使用animate動畫庫，下面我們開始介紹在vue中單獨使用animate動畫，感興趣的朋友一起看看吧2018-08-08
56個實用的JavaScript 工具函數助你提升開發(fā)效率
今天來看看JavaScript中的一些實用的工具函數，希望能幫助你提高開發(fā)效率！需要的朋友可以參考下面文章的具體內容2021-10-10
這篇文章主要介紹了Vue的混合繼承，有需要的朋友可以借鑒參考下，希望能夠有所幫助，希望能夠給你帶來幫助2021-11-11