记：elementUI----el-calendar（日期插件）爬坑指南（部分）

本文仅代表个人再使用时遇到得坑点问题记录

原文（本人博客园）：www.cnblogs.com/xcbk/articl…

事件起因：

公司有一个新的需求是这样的，于是会找了下elementUI，如下图（我们是默认一个，可以添加多个得）

 

 

 

 

 

过程：

一开始直接上了 el-calendar，上了后，发现官方文档给的信息，太少了，没有暴漏任何事件出来，只有几个变量，

如下：

 

然鹅在我们实际使用得时候这些远元是不够得，因此我有百度了加上自己摸索出了适合我这个使用的一些方法：

　　// 点击前一个月

        let prevBtn = document.querySelector(#${this.refVal} .el-calendar__button-group .el-button-group>button:nth-child(1));

        prevBtn.addEventListener('click', () => {

          this.initCheckBox(this.calendarValue);

        });

        //点击下一个月

        let nextBtn = document.querySelector(#${this.refVal} .el-calendar__button-group .el-button-group>button:nth-child(3));

        nextBtn.addEventListener('click', () => {

          this.initCheckBox(this.calendarValue);

        });

        //点击今天

        let todayBtn = document.querySelector(#${this.refVal} .el-calendar__button-group .el-button-group>button:nth-child(2));

        todayBtn.addEventListener('click', () => {

          this.initCheckBox(this.calendarValue);

        });

有了这几个方法，我们就可以进行下一步，添加里面得多选或者进行一些其他操作

完整代码如下所示：

<el-calendar :ref="refVal" v-model="calendarValue" class="elCalendar" :id="refVal">
      <template slot="dateCell" slot-scope="{ date, data }">
        <!-- 日期 -->
        <div class="dateCell">
          {{ data.day.split('-').slice(-1)[0] }}
        </div>
        <!-- <div class="festivalDay">
          {{date.getDate() - 1}}
        </div> -->
        <el-checkbox-group v-if="!!calendarDataList[data.day]" v-model="calendarDataList[data.day]" @change="handleCheckedCitiesChange">
          <el-checkbox label="4s订货"></el-checkbox>
          <el-checkbox label="厂方发货"></el-checkbox>
          <el-checkbox label="4s发货"></el-checkbox>
        </el-checkbox-group>
      </template>
  </el-calendar>

props: {
    brandValue: {
      type: String,
      default: () => '',
    },
    refVal: {
      type: String,
      default: '',
    },
    calendarObj: {
      type: Object,
      default: {},
    },
    editType: {
      type: String,
      default: '',
    },
    storeList: {
      type: Array,
      default: () => [],
    },
    selectStoreList: {
      type: Array,
      default: () => [],
    },
  },

 

data() {
    return {
      // checkList:[],
      calendarValue: new Date(), // 日历
      activeMonth: dayjs().format('YYYY-MM'), // 选中的月份
      calendarDataList: {},
      saveObj: {},
      formData: { ruleStoreList_: [] },
    };
  },

methods: {
    init() {
      console.log('初始化', this.refVal, 'this.calendarObj:', this.calendarObj);
      if (this.editType == 'edit') {
        this.saveObj = this.calendarObj; //如果有数据了，则赋值
      }

      this.initCheckBox(this.calendarValue);
      this.$nextTick(() => {
        // 点击前一个月
        let prevBtn = document.querySelector(`#${this.refVal} .el-calendar__button-group .el-button-group>button:nth-child(1)`);
        prevBtn.addEventListener('click', () => {
          this.initCheckBox(this.calendarValue);
        });

        //点击下一个月
        let nextBtn = document.querySelector(`#${this.refVal} .el-calendar__button-group .el-button-group>button:nth-child(3)`);
        nextBtn.addEventListener('click', () => {
          this.initCheckBox(this.calendarValue);
        });

        //点击今天
        let todayBtn = document.querySelector(`#${this.refVal} .el-calendar__button-group .el-button-group>button:nth-child(2)`);
        todayBtn.addEventListener('click', () => {
          this.initCheckBox(this.calendarValue);
        });
      });
    },
    initCheckBox(dateVal) {
      let date = new Date(dateVal);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? '0' + m : m;
      let d;
      let lastDay = new Date(y, m, 0).getDate(); // 每月最后一天也即每月多少天
      let obj = {};
      for (let index = 1; index <= lastDay; index++) {
        d = index < 10 ? '0' + index : index;
        obj[`${y}-${m}-${d}`] = ['4s订货', '厂方发货', '4s发货'];
      }
      this.calendarDataList = obj;
      Object.keys(this.calendarDataList).forEach((item) => {
        if (!!this.saveObj[item]) {
          this.calendarDataList[item] = this.saveObj[item];
        }
      });
    },
    handleCheckedCitiesChange() {
      Object.keys(this.calendarDataList).forEach((x) => {
        if (this.calendarDataList[x].length > 0) {
　　　　　　//如果选中了数据，则赋值，保证来回切换选择月份或者日期适合能有有数据
          this.saveObj[x] = this.calendarDataList[x];
        } else {
　　　　　　//如过当前数据没有被选择得则赋值空数组
          this.saveObj[x] = [];
        }
      });
    },
    save() {
      console.log(this.refVal, 'brandValue:', this.calendarDataList);
    },
  },