vue+element 企业级项目 实现日历编辑组件

calendar实现日历编辑组件

1.vue页面

  <el-dialog
      :title="title"
      :visible.sync="shiftDateDialog"
      width="70%"
      append-to-body
    >

      <el-select
        v-model="value"
        placeholder="请选择"
      >
        <el-option
          v-for="(item,index) in arrangeList"
          :key="index"
          :label="item"
          :value="item"
        >{{item}}
        el-option>

      el-select>

      <el-calendar>
        
        <template
          slot="dateCell"
          slot-scope="{ date, data }"
        >
          <div
            @click.prevent="dataClick(data)"
            class="dataBox"
            style="width:100%;height: 100%; "
          >
            <div class="dateSty">{{ data.day.split('-').slice(1).join('-') }}div>
            <div class="dateCon">{{calendarData[data.day]}}div>
          div>
        template>

      el-calendar>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="shiftDateForm"
        >确 定
        el-button>
        <el-button @click="shiftDateDialog = false">取 消el-button>
      div>
    el-dialog>

2.数据

  value :''
  calendarData: {},

3.方法

 // 排班选择
    dataClick (data) {
      let date = new Date()
      let currentM = date.getMonth() + 1
      let currentDay = date.getDate()
      let otherM = Number(data.day.slice(-5).slice(0, 2))
      let otherD = Number(data.day.slice(-2))
      if (otherM < currentM) {
        this.$message.warning(data.day + "已不可选择")
      } else if (otherM == currentM) {
        if (otherD < currentDay) {
          this.$message.warning(data.day + "已不可选择")
        } else {
          !this.value ? this.$message.error('请选择班次类型') : this.$set(this.calendarData, data.day, this.value)
        }
      } else {
        !this.value ? this.$message.error('请选择班次类型') : this.$set(this.calendarData, data.day, this.value)
      }
    }

这个就是对element日历组件的二次封装
不是很难!
这个组件重点在于逻辑的判断

希望能帮助需要帮助的小伙伴!

我见众人皆草木 唯有见你是青山

加 油!