Element-uiDatePicker显⽰周数
1.场景描述
我们公司是做电商的，运营的⼯作指标都是按周来定的，所以他们对周特别敏感，希望我们能在⽇期选择器上显⽰周数。刚接到这个需求时，⼼中很不乐意，因为Element-ui的⽇期选择器根本不⽀持显⽰周数。我只能看看源码来看看能否有解决的办法
2.查看源码
我们很轻松就能到DatePicker相关的代码，在packages > date-picker 整个⽬录都是date-picker的代码，在date-picker > src > basic > date-table.vue中就是显⽰⽇期的代码，在这⾥竟然发现了⼀个属性 showWeekNumber，在date-table.vue的第83⾏。
showWeekNumber: {
type: Boolean,
default: false
},
为了验证这个参数对我们是否有帮助，我们把showWeekNumber默认设置为true试试，然后把第11⾏的
<th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>
改为
<th v-if="showWeekNumber">周数</th>
设置⽤来设置国际化的，国际化⽂件中没有这个对应的翻译，我们暂时先这么写，不然会报错。当我们完成这个之后神奇的事情发⽣了
周数展⽰出来了，⽽且好像展⽰的事正确的，7.1-7.6就是2019年的第27周。既然能够展⽰周数，那么为什么element不开放出来这个参数了，是否是有什么问题呢。我们⾃⼰来简单的测试下
3. 发现并解决问题
问题
（1）切换⽉时，周数并不会发⽣变化
（2）选中的是29周，输⼊框中确展⽰的是28周
（3）hover选中时，周数不应该展⽰⾼亮的样式
（4）⽇期区间选中的样式也不正确
解决问题
（1）解决周数不变化的问题，我们到date-table.vue中第149⾏到152⾏
if (this.showWeekNumber) {
if (!row[0]) {
row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) };
}
}
当showWeekNumber为true时，row[0]就是⽤来展⽰周数的，当row[0]，存在时，就不在去获取新的值，显然不正确，我们把if判断去
掉就⾏，这样就会更新周数
（2）解决选中后周数展⽰不正确的问题，我们到date-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对应的样式即可
最后看下展⽰效果
asp查看源码配置ui
4. 最后
5. 问题
代码是已经改好了，但是我们引⼊饿了么的代码是直接通过npm下载的，线上环境也是npm下载的，我们是⽆法来更改npm的代码的。那
么我们怎么来解决这个问题呢，请看我的下⼀篇⽂章，我最近会更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。