Vue + Element 实现表头显示上周与本周时间范围的方法

在Vue项目中结合Element UI进行开发时，经常会遇到需要在表头显示特定时间范围的需求，比如显示上周与本周的时间范围。下面将详细介绍一种实现方法。

我们需要在Vue组件中获取上周和本周的时间范围。在Vue的methods中定义获取时间范围的函数。对于获取本周时间范围，可以通过获取当前日期，计算出本周的第一天（周一）和最后一天（周日）。例如：

getCurrentWeek() {
  const now = new Date();
  const day = now.getDay() === 0? 7 : now.getDay();
  const firstDay = new Date(now.getTime() - (day - 1) * 24 * 60 * 60 * 1000);
  const lastDay = new Date(now.getTime() + (7 - day) * 24 * 60 * 60 * 1000);
  return { firstDay, lastDay };
}

获取上周时间范围的函数可以基于本周时间范围进行计算，将本周第一天减去7天得到上周第一天，将本周最后一天减去7天得到上周最后一天。

接下来，在Element UI的表格组件中，我们可以通过表头的自定义插槽来显示时间范围。在表格的column属性中设置slot-scope属性，然后在对应的插槽中渲染时间范围。

<el-table :data="tableData">
  <el-table-column label="日期范围" width="200">
    <template slot-scope="scope">
      <span>上周：{{ formatDate(lastWeek.firstDay) }} - {{ formatDate(lastWeek.lastDay) }}</span><br>
      <span>本周：{{ formatDate(currentWeek.firstDay) }} - {{ formatDate(currentWeek.lastDay) }}</span>
    </template>
  </el-table-column>
  <!-- 其他列 -->
</el-table>

这里的formatDate函数用于将日期格式化为指定的字符串格式。

最后，在Vue的mounted生命周期钩子函数中调用获取时间范围的函数，并将结果赋值给相应的变量。

通过以上步骤，我们就可以在Vue + Element UI项目中实现表头显示上周与本周时间范围的功能。这种方法简单实用，能够满足常见的业务需求。根据实际情况，我们还可以对时间范围的计算和显示进行进一步的优化和定制，以适应不同的项目要求。