1.场景描述

我们公司是做电商的，经营指标是按周来定的，所以对周特别敏感，希望能在日期选择器上显示周数。当我第一次收到这个请求时，我非常不高兴，因为Element-ui的日期选择器根本不支持显示周数。我只能看看源代码，看看有没有解决办法

可以看到https://github。github中的com/eleme Fe/element/pull/16415/commissions/2b 810 cf 73d 1127645054265469 bbbb 353d 036 CB 21。

2.检查源代码

我们可以很容易地找到与日期选择器相关的代码。整个包日期选择器目录是日期选择器的代码，日期选择器SRC基本日期表. vue的代码是显示日期的代码。这里，在Date-Table.vue的第83行找到了一个属性showWeekNumber

Showweeknumber : { type : boolean，default: false}，为了验证这个参数对我们是否有帮助，我们尝试将showWeekNumber默认设置为true，然后在第11行设置值

th v-if=' show week number ' { t(' El . datepicker . week ')} }/th更改为

th v-if=' showWeekNumber ' weeks/th设置用于设置国际化。国际化文件中没有对应的翻译。暂时写这个吧，不然会报错。当我们完成这个的时候，神奇的事情发生了

显示周数，似乎显示正确。7.1-7.6是2019年的第27周。既然可以显示周数，为什么元素不打开这个参数？有什么问题吗？让我们自己做一个简单的测试

3.发现并解决问题

问题

(1)切换月份时，周数不会改变

(2)选择29周，输入框中显示28周

(3)当选择3)悬停时，周数不应显示突出显示的样式

(4)日期间隔中选择的样式也不正确

解决问题

(1)为了解决周数不变的问题，我们在date-table.vue中找到第149行到第152行

if (this.showWeekNumber) { if(！第[0]行){第[0]行={ type: 'week '，text : getWeekNumber(nextDate(startDate，I * 7 1))}；}}当showWeekNumber为true时，第[0]行用于显示周数。当行[0]存在时，它将不会获得新值，这显然是不正确的。我们只需要删除if判断，这样周数就会更新

(2)为了解决选择后周显示不正确的问题，我们在date-table.vue中找到了第14行到第18行

tr class=' El-date-table _ _ row ' v-for='(row，key)在行' : class=' { current : is weekative(row[1])} ' : key=' key ' is weekative用于获取当前显示的周数

行' : class=' { current : isweekactivity(row[showWeekNumber？2 : 1]) }' :key='key '至于第三个问题和第三个问题，都是样式问题，我们可以修改日期表对应的样式

最后看显示效果

4.最后

我已经向element-ui提到了pr，但是没有合并。你可以在github https://github看到具体的代码。com/ElemeFE/Element/Pull/16415/commissions/2b 810 cf 73d 1127645054265469 BBB 353d 036 CB 21，解决了国际化问题，增加了参数显示周数。

5.问题

代码已经修改了，但是我们介绍的代码是直接通过npm下载的，线上环境也是npm下载的，所以不能更改npm的代码。那么如何才能解决这个问题呢？请看我的下一篇文章。最近会更新。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。