elementplus 中 DatePicker 日期選擇器樣式修改無效

問題

遇到一個需求需要修改 DatePicker 日期選擇器的樣式，在添加了 scoped 屬性的 style 標簽，并且使用了 deep 樣式穿透的情況下并不能修改其樣式。

原因

DatePicker 日期選擇器彈出面板默認掛載在 body 上，所以在組件中添加了 scoped 屬性的 style 標簽下是修改不到其樣式的。

解決

官網中提供了一個給彈出面板設置 class 類名的屬性——popper-class，通過該屬性添加類名后選擇該類名來修改樣式即可。

需要注意的是，雖然官網提供了該屬性，但是我們通過屬性來修改樣式的時候也并不能改變彈出面板是掛載在 body 的事實，所以我們要修改其樣式的話需要把 scoped 屬性去掉才行，我們可以添加一個新的不帶 scoped 屬性的 style 標簽來對其樣式進行修改。代碼如下：

<template>
  <el-date-picker
     v-model="time"  
     type="datetime"
     placeholder="請選擇時間"
     popper-class="date-cell">
  </el-date-picker>
</template>
<style scoped lang="scss">
	...//組件內部樣式
</style>
<style lang="scss"> //去掉 scoped 屬性
	...//時間選擇器樣式
</style>

補充介紹datepicker的使用方法

===導語：前一章已經實現了點擊輸入框彈出datepicker日期插件，但業(yè)務的處理邏輯放在哪里還未解決。此章主要介紹datepicker的使用方法，以及常見的配置項和對應的值。

使用方法：

方法很簡單$(‘selector’).datepicker({});此方法內包含著配置參數的對象，根據需要按需配置即可。
*需要注意的是：因為此插件的調用默認事件是focus或者是button所以在寫html時就選擇input或者是button元素。

常見配置項：

1.minDate：最小可選日期*
值：日期或數字或字符串
==日期：包含最小日期的日期對象。
== 數字：從今天開始的幾天。例，2代表從今天開始的兩天，-1代表昨天。
==字符串：由dateFormat選項定義的格式的字符串，或相對日期。
相對日期 必 須包含值和期間對; 有效期為數"y"年，
"m"數 月，“w"數周和數"d"天。例如，”+1m +7d"代表
從今天起一個月零七天。

2.maxDate：最大可選日期
值：日期或數字或字符串（同上）
默認為null，沒有最大值。

3.dateFormat：日期格式
值：字符串
默認：“mm/dd/yy”
4.monthNames：月份名稱
值：包含12個月份的數組（主要用于本土化）
默認： [ “January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December” ]
5.dayNamesMin：列標題
值：包含周日到周六的數組（主要用于本土化）
默認：[ “Su”, “Mo”, “Tu”, “We”, “Th”, “Fr”, “Sa” ]
6.showMonthAfterYear：年月顯示順序
值：布爾值
默認：false
7.beforeShow:日期面板顯示之前的處理函數（處理業(yè)務中面板顯示與否相關的邏輯）
默認：null
功能：獲取輸入字段和當前datepicker實例并返回選項對象以更新datepicker的函數。它在顯示datepicker之前調用。
8.beforeShowDay：面板顯示之前可以為每個日期做處理的函數（處理業(yè)務中對日期的相關處理邏輯）
值：一個以日期作為參數的函數，必須返回一個數組：
[0]：true/ false表示此日期是否可選
[1]：要添加到日期單元格的CSS類名稱
[2]：此日期的可選彈出工具提示語
默認： null
*在顯示日期選擇器之前，每個日期都會調用該函數。（相當于對每個日期遍歷，此函數會被調用多次）

以上只是在此項目中用到的一些方法，具體其他的參數，值，以及函數的使用方法請參考datepicker官網

項目中的遇到的問題，及解決辦法：

項目需求：
只有后臺返回的日期時間可以選擇，之外的日期都不可點。
已取得：
由以上的文檔，可以得知處理業(yè)務中面板顯示與否相關的邏輯應該放在beforeShow對應的處理函數中。
處理業(yè)務中對日期的相關處理邏輯應該放在beforeShowDay對應的處理函數中。
存在問題：
處理完畢后插件的整體處理邏輯沒有問題了，但是重新寫的樣式無法覆蓋原來的樣式代碼。

改造前代碼：

日期插件內部樣式改動找到對應的樣式類名重新定義就可以，此處不在貼代碼。但是點擊輸入框彈出插件時樣式未被覆蓋上。

因為此插件的樣式要在點擊后插件彈出來之前觸發(fā)，此插件已經給這個輸入框綁定上了focus事件，再綁定個click事件，在此事件內做樣式修改不就可以了！
經實驗，可用。

改造后代碼：

總結：
1.$(‘selector’).datepicker({})默認已經綁定focus或者button事件觸發(fā)，無需再次綁定對應事件。
2.處理業(yè)務中面板顯示與否相關的邏輯應該放在beforeShow對應的處理函數中。
3.對日期的相關處理邏輯應該放在beforeShowDay對應的處理函數中。
4.再綁定個click事件，在此事件內做樣式修改。

**最重要的還是先看官網文檔，避免做很多無用功?。。。。?/strong>