快捷導(dǎo)航

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

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

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

問(wèn)題描述：

項(xiàng)目開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)el-select和el-date-picker彈出框顯示時(shí)候，滾動(dòng)屏幕，導(dǎo)致彈出框定位出現(xiàn)問(wè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彈出框定位問(wèn)題解決方案(推薦)的文章就介紹到這了,更多相關(guān)element-ui el-select下拉框el-date-picker彈出框定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3+TypeScript項(xiàng)目架構(gòu)實(shí)踐指南
在現(xiàn)代前端開(kāi)發(fā)中,Vue3和Vite的組合已經(jīng)成為許多開(kāi)發(fā)者的首選,這篇文章主要介紹了Vue3+TypeScript項(xiàng)目架構(gòu)實(shí)踐的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2026-02-02
Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟
最近做時(shí)速云項(xiàng)目部署,需要將前端項(xiàng)目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟,需要的朋友可以參考下
2023-10-10
vue3圖片放大鏡效果實(shí)現(xiàn)的完整教程
在Vue中實(shí)現(xiàn)放大鏡效果,主要是為了增強(qiáng)用戶體驗(yàn),讓用戶在查看商品圖片時(shí)能更清晰地觀察細(xì)節(jié),這篇文章主要介紹了vue3圖片放大鏡效果實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-11-11
vue3.0+element Plus實(shí)現(xiàn)頁(yè)面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能
這篇文章主要介紹了vue3.0+element Plus實(shí)現(xiàn)頁(yè)面布局，側(cè)邊欄菜單路由跳轉(zhuǎn),需要的朋友可以參考下
2023-07-07
vue.js通過(guò)自定義指令實(shí)現(xiàn)數(shù)據(jù)拉取更新的實(shí)現(xiàn)方法
數(shù)據(jù)拉取更新這個(gè)功能相信大家基本都見(jiàn)過(guò)，但是如果要做起來(lái)卻不止如何做起，所以這篇文章給大家分享了vue.js通過(guò)自定義指令實(shí)現(xiàn)的方法，閱讀本文需要對(duì)vue有一定理解，有需要的朋友們下面來(lái)一起看看吧。
2016-10-10
vue如何實(shí)現(xiàn)垂直居中
這篇文章主要介紹了vue如何實(shí)現(xiàn)垂直居中，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue中map()的用法案例
map()函數(shù)定義在JS的array中,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于Vue中map()的用法案例,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
animate.css在vue項(xiàng)目中的使用教程
在vue項(xiàng)目中使用動(dòng)畫(huà)其實(shí)有多種方式，可以使用vue中的過(guò)渡transition，可以使用animate動(dòng)畫(huà)與transition配合使用，也可以單獨(dú)使用animate動(dòng)畫(huà)庫(kù)，下面我們開(kāi)始介紹在vue中單獨(dú)使用animate動(dòng)畫(huà)，感興趣的朋友一起看看吧
2018-08-08
56個(gè)實(shí)用的JavaScript 工具函數(shù)助你提升開(kāi)發(fā)效率
今天來(lái)看看JavaScript中的一些實(shí)用的工具函數(shù)，希望能幫助你提高開(kāi)發(fā)效率！需要的朋友可以參考下面文章的具體內(nèi)容
2021-10-10
Vue的混合繼承詳解
這篇文章主要介紹了Vue的混合繼承，有需要的朋友可以借鑒參考下，希望能夠有所幫助，希望能夠給你帶來(lái)幫助
2021-11-11