转载请注明出处: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>
  1. 让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>
  1. 设置行激活样式,该样式为选中周的阴影部分,第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>
  1. 解决切换月份时,不刷新周数。152行
    注释掉 if (!row[0]) {
    具体效果如下:
if (this.showWeekNumber) {
   row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) };
 }
  1. 解决选中周,无蓝色样式问题,第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文件夹

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

  2. 再次编译你的项目

5.最终效果

  1. week模式
    在这里插入图片描述
  2. 普通模式
    在这里插入图片描述

6.说明

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

Logo

前往低代码交流专区

更多推荐