1.シーン記述

当社は、業績指標を毎週に設定されている、電子ビジネスをやっているので、彼らは週に特に敏感で、私たちは、日付ピッカーに週番号を表示することができます願っています。要素-UIの日付ピッカーは、週の表示をサポートしていないので、ちょうど、この需要、非常に満足の心を受け取りました。私は唯一の解決策があるかどうかを見るために、ソースを見ることができます

あなたにはgithubの上の特定のコードを見ることができます https://github.com/ElemeFE/element/pull/16415/commits/2b810cf73d1127645054265469bbb353d036cb21

2.ソースを表示

私たちは中に、簡単に関連するコードの日付ピッカーを見つけることができるようになります日付ピッカー>パッケージディレクトリ全体が日付ピッカーコード、ある日付ピッカー> SRC>基本>日付table.vue ここに日付を表示するコードでは、でも財産見つけ showWeekNumber、日付table.vueのライン83を。

showWeekNumber：{ 
   タイプ：ブール値、
   デフォルト：偽
 }、

このパラメータは、私たちに便利ですテストするために、我々はshowWeekNumberデフォルト設定は真試して、その後、最初の11行目

<TH V-IF = "showWeekNumber"> {{T（ 'el.datepicker.week'）}} </番目>

変更

周数</目> <V-IF = "showWeekNumber" 目>

国際化を設定するための設定、対応するファイルの国際化は翻訳されませんので、我々は書くことが求められているか、エラーになります。我々は起こったこの魔法のような事を完了すると

週の数が表示されるまで、何かが右、7.1から7.6は、2019年の最初の27週間であることを示すように見えました。週の数を示し、なぜこの素子パラメータを開いていない、とあらゆる問題がまだ存在する場合はできるようになりました。私たちは自分自身の簡単なテストの下で

3.問題の特定と解決

問題

（1）ヶ月を切り替えたときに、週および変更されません

（2）選択された28週に決定された入力ボックスを示し、29週間です

（3）ホバーを選択すると、数週間は、スタイルを強調表示してはなりません

（4）日付範囲選択されたスタイルが正しくありません

この問題を解決します

（1）変更されません数週間のための問題を解決するために、我々はライン149-152行の日付-table.vueを見つけます

もし（この.showWeekNumber）{
   場合（[0行！{]）
    行[ 0] = {タイプ： '週'、テキスト：getWeekNumber（nextDate（たstartDate、iが7 + 1 * }））。
  } 
}

showWeekNumberがtrueの場合、行の週の数を表示するために使用された行は、[0]、そこに、新しい値に取得しないとき[0]、明らかに正しくない、我々は持っている裁判官が取り外されている場合は更新してしまうライン、上週間

（2）数は後周王朝は、適切な質問が表示されない解決を選択し、我々は行の日付table.vueライン14-18を見つけます

<tr
  class="el-date-table__row"
  v-for="(row, key) in rows"
  :class="{ current: isWeekActive(row[1]) }"
  :key="key">

isWeekActive就是用来获得当前展示的周数的，当展示周数之后我们要做适当的修改

<tr
  class="el-date-table__row"
  v-for="(row, key) in rows"
  :class="{ current: isWeekActive(row[showWeekNumber ? 2 : 1]) }"
  :key="key">

至于第三个问题和第三个问题都是样式的问题，我们修改下date-table对应的样式即可

最后看下展示效果

4. 最后

我已经向element-ui提了pr，但是还没有merge，具体的代码大家可以在github中看到 https://github.com/ElemeFE/element/pull/16415/commits/2b810cf73d1127645054265469bbb353d036cb21，解决了国际化的问题和增加了参数展示周数

5. 问题

代码是已经改好了，但是我们引入饿了么的代码是直接通过npm下载的，线上环境也是npm下载的，我们是无法来更改npm的代码的。那么我们怎么来解决这个问题呢，请看我的下一篇文章，我最近会更新。

要素-UI日付ピッカーを表示する週数