更改element-ui的日历组件--支持点击--样式修改--悬浮数据

• 原样式
• 修改以后
  

  <el-calendar v-model="value">
            <template slot="dateCell" slot-scope="{date, data}">
              <el-popover popper-class="popoverBackB" placement="top" @show="handerShow(date, data)" width="200" trigger="hover" :content="dateText">
                <div class="calendar-day" slot="reference" @click="clickData">{{ data.day.split('-').slice(2).join('-') }}</div>
              </el-popover>
            </template>

 </el-calendar>


 data() {
    return {
      value: new Date(),
    }
  }    

+ 方法

    handerShow(date, data) {
      this.dataDay = data.day
      appointMessage({ date: data.day }).then(res => {
        if (res.data) {
          this.dateText = `今日预约数${res.data}条`
        } else {
          this.dateText = '没有数据'
        }
      })
      // console.log(date, data);
    },

   clickData() {
      // console.log(111);
      this.$router.push({
        path: '/customercenter/reserverecord',
        query: {
          currentTab: 1,
          comeDate: this.dataDay
        }
      })
    },

• 样式

/deep/ {
  .el-calendar-table .el-calendar-day {
    height: 52px;
    text-align: center;
    line-height: 36px;
  }
  .el-calendar-table__row td {
    border: 0;
    border-radius: 50%;
  }
  .el-calendar-table tbody {
    border-left: 1px solid red !important;
  }
  .el-calendar-table tr td:first-child {
    border: none;
  }
  .el-calendar-table tr:first-child td {
    border: none;
  }
  .el-calendar-table td.is-selected {
    background-color: #2c51ef;
    color: #fff;
  }
  .el-calendar-table td.is-selected {
    border-radius: 50%;
  }
  .el-calendar-table .el-calendar-day:hove {
    border-radius: 50%;
    background-color: #2c51ef !important;
    color: #fff;
  }
  .el-calendar-table .el-calendar-day:hover {
    border-radius: 50%;
    color: #fff;
    background-color: #2c51ef !important;
  }
  .el-calendar-table thead th:before {
    content: "周";
  }
}

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试