elementUI DatePicker 日期选择器 周数显示（2.12.0版本）解决周数显示不正确及选中效果问题，并兼容选择器非week模式的正常运行

转载请注明出处：https://blog.csdn.net/qq_42120178/article/details/112695295

1. 环境

1. elementUI：2.12.0

2. 准备

1. 到GIt上下载跟你对应版本的elementUI源码：传送门
2. 依赖安装

npm install

3.修改

3.1 date.vue

文件位置：element-2.12.0\packages\date-picker\src\panel\date.vue

1. 将showWeekNumber属性绑定到DatePicker组件上，否则使用的将是DatePicker组件中的默认值false，第94行添加如下代码

:show-week-number=“showWeekNumber”

效果如下

<date-table
 v-show="currentView === 'date'"
 @pick="handleDatePick"
 :selection-mode="selectionMode"
 :show-week-number="showWeekNumber"
 :first-day-of-week="firstDayOfWeek"
 :value="value"
 :default-value="defaultValue ? new Date(defaultValue) : null"
 :date="date"
 :cell-class-name="cellClassName"
 :disabled-date="disabledDate">
</date-table>

2. 让showWeekNumber值跟随模式变化，在date.vue中默认为false，在第219行添加如下代码

} else if (newVal === 'week') {
  this.showWeekNumber = true;

效果如下

selectionMode(newVal) {
  if (newVal === 'month') {
    /* istanbul ignore next */
    if (this.currentView !== 'year' || this.currentView !== 'month') {
      this.currentView = 'month';
    }
  } else if (newVal === 'dates') {
    this.currentView = 'date';
  } else if (newVal === 'week') {
    this.showWeekNumber = true;
  }
}

3.2 date_table.vue

文件位置：element-2.12.0\packages\date-picker\src\basic\date-table.vue

1. 修改表头，第11行，原本是官方是用了国际化的（但都注释掉了），我这边图方便，就直接写中文了，如果你需要国际化，请再自行研究。

<tr>
  <th v-if="showWeekNumber">周数</th>
  <th v-for="(week, key) in WEEKS" :key="key">{{ t('el.datepicker.weeks.' + week) }}</th>
</tr>

2. 设置行激活样式，该样式为选中周的阴影部分，第17行 。（isWeekActive这个函数始终要传入周一，因为多了一列周数，所以要取2）

:class="{ current: isWeekActive(row[showWeekNumber ? 2 : 1]) }"

具体效果如下

<tr
  class="el-date-table__row"
  v-for="(row, key) in rows"
  :class="{ current: isWeekActive(row[showWeekNumber ? 2 : 1]) }"
  :key="key">
  <td
    v-for="(cell, key) in row"
    :class="getCellClasses(cell)"
    :key="key">
    <div>
      <span>
        {{ cell.text }}
      </span>
    </div>
  </td>
</tr>

3. 解决切换月份时，不刷新周数。152行
   注释掉 if (!row[0]) {
   具体效果如下：

if (this.showWeekNumber) {
   row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) };
 }

4. 解决选中周，无蓝色样式问题，第300行
   将 - 变 +

const offsetFromStart = row * 7 + (column + (this.showWeekNumber ? 1 : 0)) - this.offsetDay;

具体效果如下：

getDateOfCell(row, column) {
  const offsetFromStart = row * 7 + (column + (this.showWeekNumber ? 1 : 0)) - this.offsetDay;
  return nextDate(this.startDate, offsetFromStart);
},

4.编译完成

1. 编译打包

npm run dist

在element-2.12.0文件夹下会出现lib文件夹

2. 替换lib文件夹
   element-2.12.0\lib 文件夹 替换 你项目中的 node_modules\element-ui\lib 文件夹

3. 再次编译你的项目

5.最终效果

1. week模式
   
2. 普通模式
   

6.说明

该代码由博主改写，未经过详尽的测试，如果有问题有好的解决办法，请在留言区讨论