解決element DateTimePicker+vue彈出框只顯示小時
三個知識點：
1.css 后代選擇器
https://www.w3school.com.cn/css/css_selector_descendant.asp
2.vue深度選擇器
https://vue-loader.vuejs.org/zh/guide/scoped-css.html
3.element ui DateTimePicker 指定下拉框類名 popper-class
https://element.eleme.cn/#/zh-CN/component/datetime-picker
在搞清楚上述三個知識點的前提下，在vue頁面的全局樣式中（即不帶有scoped標(biāo)記的style標(biāo)簽中），利用css 后代選擇器+vue深度選擇器可以鎖定要控制的element ui組件中的樣式，用外層的樣式類名約束了要控制的element ui組件內(nèi)部的樣式，所以不會造成全局所有element ui組件被污染的情況。
但是DateTimePicker比較特殊，彈出框的dom不隸屬于當(dāng)前的vue文件內(nèi)的任何標(biāo)簽，所以無法在當(dāng)前頁用css 后代選擇器+vue深度選擇器鎖定要自定義樣式的DateTimePicker的彈出框部分。通過查閱DateTimePicker的官方文檔發(fā)現(xiàn)可以使用popper-class來指定下拉框類名。這樣就可以使用這個指定的類名+vue深度選擇器在全局樣式中唯一重寫某個需要自定的DateTimePicker的彈出框部分。
<template>
<div class="app-container ">
<el-date-picker
v-model="..."
type="datetimerange"
align="right"
range-separator="至"
start-placeholder="開始時間"
end-placeholder="結(jié)束時間"
format="yyyy-MM-dd HH"
value-format="yyyy-MM-dd HH"
popper-class="tpc"
></el-date-picker>
</div>
</template>
<style lang="scss" scoped>
...
</style>
<style>
.tpc /deep/ .el-time-spinner__wrapper {
width:100% !important;
}
.tpc /deep/ .el-scrollbar:nth-of-type(2) {
display: none !important;
}
</style>
到此這篇關(guān)于解決element DateTimePicker+vue彈出框只顯示小時的文章就介紹到這了,更多相關(guān)element DateTimePicker彈出框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3使用路由及配置vite.alias簡化導(dǎo)入寫法的過程詳解
這篇文章主要介紹了Vue3使用路由及配置vite.alias簡化導(dǎo)入寫法，本文通過實例代碼給大家講解的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于Vue前端生成UUID的相關(guān)資料,前端需要生成一個唯一標(biāo)識符作為ID時,可以使用Vue UUID插件,比如生成訂單號、用戶ID等等,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue接入下載文件接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
vue如何實現(xiàn)動態(tài)的選中狀態(tài)切換效果
這篇文章主要介紹了vue如何實現(xiàn)動態(tài)的選中狀態(tài)切換效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
element-plus結(jié)合sortablejs實現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實現(xiàn)table行拖動排序,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的同學(xué)可以自己動手試一試2023-10-10
VUE table表格動態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實時更新）
這篇文章主要介紹了VUE table表格動態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實時更新）,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2020-04-04
解決vue接口數(shù)據(jù)賦值給data沒有反應(yīng)的問題
今天小編就為大家分享一篇解決vue接口數(shù)據(jù)賦值給data沒有反應(yīng)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue父子組建的簡單通信之控制開關(guān)Switch的實現(xiàn)
這篇文章主要介紹了Vue父子組建的簡單通信之控制開關(guān)Switch的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了如何設(shè)置和運行一個基于uni-app框架的項目,包括安裝必要的軟件、克隆項目并安裝依賴,以及如何使用HBuilderX進行項目運行和調(diào)試,需要的朋友可以參考下2025-01-01
這篇文章主要為大家介紹了Vue3中進行二維碼的生成與解碼實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03