vue实现日历表格（element-ui）

下面我将详细讲解“vue实现日历表格（element-ui）”的完整攻略，包含以下几个部分：

1. 需求分析
2. 技术选型
3. 实现步骤

1. 需求分析

我们需要实现一个日历表格的组件，要求具有以下功能：

• 能够展示指定月份的日历表格；
• 支持选择日期，选择的日期会高亮显示；
• 支持设置已选择日期，已选择的日期会高亮显示；
• 支持上一个月、下一个月的切换。

2. 技术选型

本文采用Vue框架及其官方UI组件库element-ui来实现日历表格。

3. 实现步骤

（1） 创建Vue组件

我们先在Vue项目中的components目录下创建Calendar.vue文件，然后在文件中编写如下代码：

<template>
  <div>
    <el-date-picker v-model="date" type="month" format="yyyy-MM" @change="generateCalendar"></el-date-picker>
    <table class="calendar">
      <thead>
        <tr>
          <th v-for="item in weekDays" :key="item">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rowsData" :key="index">
          <td v-for="(item, index) in row" :key="index"
             :class="{ disabled: item.disabled, active: item.active, selected: item.selected }"
             @click="clickDate(item)">
            {{ item ? item.date : ''}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data () {
    return {
      date: new Date(),
      today: moment().format('YYYY-MM-DD'),
      weekDays: ['日', '一', '二', '三', '四', '五', '六'],
      rowsData: []
    }
  },
  mounted () {
    this.generateCalendar()
  },
  methods: {
    generateCalendar () {
      const currYear = moment(this.date).year()
      const currMonth = moment(this.date).month() + 1
      const firstDateOfMonth = moment(this.date).startOf('month')
      const firstDayOfMonth = firstDateOfMonth.day()
      const daysInMonth = moment(this.date).daysInMonth()
      const lastMonth = moment(this.date).subtract(1, 'month')
      const daysInLastMonth = moment(lastMonth).daysInMonth()
      const lastMonthDayStart = daysInLastMonth - firstDayOfMonth + 1
      let date = 1
      let disabled = false
      let active = false
      let selected = false
      const rows = []
      for (let i = 0; i < 6; i++) {
        const row = []
        for (let j = 0; j < 7; j++) {
          if (i === 0 && j < firstDayOfMonth) {
            const date = lastMonthDayStart + j
            const item = {
              date,
              month: currMonth - 1,
              year: currYear,
              disabled: true
            }
            row.push(item)
          } else if (date > daysInMonth) {
            const date = date - daysInMonth
            const item = {
              date,
              month: currMonth + 1,
              year: currYear,
              disabled: true
            }
            row.push(item)
          } else {
            const itemDate = moment(`${currYear}-${currMonth}-${date}`).format('YYYY-MM-DD')
            disabled = false
            active = false
            selected = false
            if (moment(itemDate).isBefore(moment(this.today), 'day')) {
              disabled = true
            }
            if (itemDate === this.today) {
              active = true
            }
            if (itemDate === this.selected) {
              selected = true
            }
            const item = {
              date,
              month: currMonth,
              year: currYear,
              disabled,
              active,
              selected
            }
            if (item.selected) {
              this.$emit('select-date', itemDate)
            }
            row.push(item)
            date++
          }
        }
        rows.push(row)
      }
      this.rowsData = rows
    },
    clickDate (item) {
      if (!item.disabled) {
        const itemDate = moment(`${item.year}-${item.month}-${item.date}`).format('YYYY-MM-DD')
        this.$emit('select-date', itemDate)
        this.selected = itemDate
        this.generateCalendar()
      }
    }
  }
}
</script>

<style scoped>
.calendar {
  border: 1px solid #ccc;
  width: 300px;
}
.calendar th,
.calendar td {
  text-align: center;
  padding: 10px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.calendar th:last-child,
.calendar td:last-child {
  border-right: none;
}
.calendar tr:last-child td {
  border-bottom: none;
}
.calendar th {
  background-color: #eee;
  color: #333;
}
.calendar td.disabled {
  color: #ccc;
  cursor: default;
}
.calendar td.active {
  background-color: #409EFF;
  color: #fff;
}
.calendar td.selected {
  background-color: #67C23A;
  color: #fff;
}
</style>

（2） 使用组件

在需要使用组件的地方引入组件并使用即可：

<template>
  <div>
    <Calendar @select-date="handleSelectDate"></Calendar>
  </div>
</template>

<script>
import Calendar from '@/components/Calendar'

export default {
  components: {
    'Calendar': Calendar
  },
  methods: {
    handleSelectDate (date) {
      console.log('selected date: ', date)
    }
  }
}
</script>

至此，我们已经实现了一个基本的日历表格组件，并且支持选择日期和设置已选择日期的功能。

（3） 示例说明

我们可以通过以下两个示例进一步了解如何使用这个日历表格组件：

1. 示例一：在个人日历页面中，使用日历表格展示用户设置的日程安排。

<template>
  <div>
    <Calendar :selected-date="selectedDate" @select-date="handleSelectDate"></Calendar>
  </div>
</template>

<script>
import Calendar from '@/components/Calendar'
export default {
  components: {
    'Calendar': Calendar
  },
  data () {
    return {
      selectedDate: '2022-06-06'
    }
  },
  methods: {
    handleSelectDate (date) {
      this.selectedDate = date
      // ...do something
    }
  }
}
</script>

1. 示例二：在商城订单页面中，使用日历表格展示订单时间。

<template>
  <div>
    <Calendar :selected-date="selectedDate" @select-date="handleSelectDate"></Calendar>
  </div>
</template>

<script>
import Calendar from '@/components/Calendar'
export default {
  components: {
    'Calendar': Calendar
  },
  data () {
    return {
      selectedDate: '2022-06-06'
    }
  },
  methods: {
    handleSelectDate (date) {
      this.selectedDate = date
      // ...do something
    }
  }
}
</script>

以上两个示例中，我们只需要在使用时传入selected-date属性并绑定到一个data属性上，就可以设置日历表格中默认选择的日期。

总结

本文中，我们详细讲解了如何使用Vue框架和element-ui组件库来实现一个日历表格组件，希望能对您有所帮助。如果有任何疑问或建议，请随时在评论区留言，我们将竭诚为您服务。