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>
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <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日历组件的二次封装
不是很难!
这个组件重点在于逻辑的判断

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

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

加 油!