element-ui笔记

 1、日历控件修改，自定义时间切换按钮

<div class="detailModal_container_part3" :style="{'marginTop':detailCarNature != 2 ? '' : '12px'}">
                <div class="detailDiv_part_titleDiv">
                  <div class="detailDiv_part_title">出车记录</div>
                  <div class="detailDiv_part_btn">
                    <i class="el-icon-arrow-left" @click="clickLast"></i>
                    <div>{{monthValue}}</div>
                    <i class="el-icon-arrow-right" @click="clickNext"></i>
                  </div>

                </div>
                <div class="part3_calendarDiv">
                  <el-calendar :first-day-of-week=7 v-model="carRecordsMonth" ref="domCalendarBtn">
                    <template slot="dateCell" slot-scope="{date, data}">
                      <!-- carRecordsArr -->
                      <div v-if="brightDate.includes(data.day)">
                        <el-popover placement="top-start" title="" trigger="hover" popper-class="carRecordsPopper">
                          <div class="">
                            <div>
                              {{brightContent(data.day).date}}
                            </div>
                            <div>
                              运单数：{{brightContent(data.day).recordTimes}}笔
                            </div>
                          </div>
                          <div slot="reference">
                            <p>
                              {{ data.day.split('-').slice(2).join('-') }}<br />
                            </p>
                            <!--标记-->
                            <div class="budge"></div>
                          </div>
                        </el-popover>
                      </div>
                      <div v-else>
                        <p>
                          {{ data.day.split('-').slice(2).join('-') }}<br />
                        </p>
                      </div>
                    </template>
                  </el-calendar>
                </div>
</div>




//js

watch: {
      '$route'(to, from) { // 监听路由改变
      },
      carRecordsMonth: {
        handler(newVal, objVal) {
          if(newVal){
            console.log(newVal);
            console.log(this.carRecordsMonth);
            this.monthValue = this.$moment(this.carRecordsMonth).format('YYYY年M月');
            // if (this.carRecordsMonth != newVal) {
              // console.log('可以调动')
              this.getCarRecordList(); //获取当月出车记录
            // }
          }
        },
      }
    },
computed: {
      // 统计有出车记录的数组
      brightDate () {
        let ary = []
        for (let i in this.carRecordsArr) {
          if (this.carRecordsArr[i].recordTimes > 1) {
            ary.push(this.carRecordsArr[i].recordDate)
          }
        }
        return ary
      },
    },



 methods: {
  clickLast() {//上个月
 	this.$refs.domCalendarBtn.$children[0].$children[0].$el.click()
  },
  clickNext() {//下个月
	this.$refs.domCalendarBtn.$children[0].$children[2].$el.click()
  },
}