Vue學習33----第三方日曆組件ele-calendar 的使用（結合了lodash中的_.filter，_.find，_.map）

文檔地址：
https://www.npmjs.com/package/ele-calendar
https://github.com/xuyanming/ele-calendar

效果圖

組件：

    <ele-calendar
      :render-content="renderContent"
      :data="datedef"
      :prop="prop"
      @pick="datePick"
    ></ele-calendar>

數據：

    data() {
      return {
        datedef: [
          {'date': "2019-05-01", 'content': '休息', "cid": null},
          {'date': "2019-05-02", 'content': '休息', "cid": null},
        ],
        prop: 'date' //對應日期字段名
      }
    },

渲染：

      renderContent(h, {defdate, ...parmas}) {
        //把時間轉成時間戳
        var imoment = moment(defdate);
        //把時間進行格式化
        let geshi = imoment.format('YYYY-MM-DD');
        //拿到時間所對應的星期
        let week = imoment.day();
        //用日期對比數組中的元素，如果存在就返回對象，如果不存在就返回空
        let info = _.find(this.datedef, {'date': geshi});
        return (
          <div style = "min-height:60px;">
          {imoment.date()}
          <br/>
          {info? info.content : [0, 6].indexOf(week) != -1 ? '休息' : '上班'}
          </div>
      )
        ;
      },

點擊事件：

      datePick(date, event, row, dome) {
        // 對時間格式進行格式化，拿到年月日和周
        // 查找點擊日期，是否在數組裏面，如果是返回一個對象，如果沒有返回空
        // 數組存在這一對象，則修改，如果不存在，則添加到數組
        let imoment = moment(date);
        // 格式化成，年月日
        let iformat = imoment.format('YYYY-MM-DD');
        // 格式化，拿到日
        let idate = imoment.date();
        // 拿到星期
        let week = imoment.day();
        // 在數組中查找，數組中是否有點擊日期對應的對象，有則拿出來，沒有接返回空
        let info = _.find(this.datedef,{'date':iformat});
        // 在判斷在數組中有沒有這個對象，如果有，修改屬性，沒有，在數組中加入一個對象
        console.log(info);
        this.datedef = info?_.map(this.datedef,iobject=>info==iobject?{...iobject,'content':iobject.content=='上班'?'休息':'上班'}:iobject):[...this.datedef,{'date':iformat,'content':[0,6].indexOf(week)!=-1?'休息':'上班'}];


      }

源碼下載：
https://download.csdn.net/download/zhaihaohao1/11168112