7.el-calendar日历组件自定义内容

1.效果图：

2.template代码：

  <el-calendar v-model="tradeDate">
    <template slot="dateCell" slot-scope="{ date, data }">
      <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''">
        <div class="calendar-day">
          {{
          data.day
          .split('-')
          .slice(2)
          .join('-')
          }}
        </div>
        <div v-for="(item, index) in formatSchedule(data)" :key="index" class="tradeDate">
          <div class="trade_money">
            <b class="text-danger">￥{{item.trade_money}}</b>
          </div>
          <!-- <div>
            <span>结算总额：</span>
            <b class="text-danger">￥{{item.settlement_money}}</b>
          </div>-->
          <div
            class="trade_rate_money"
            v-show="rateMoney > 0 && item.trade_rate_money == 0 ? false:true"
          >
            <!-- <span>手续费：</span> -->
            <img src="./images/calendarIco4.png" />
            <b class="text-primary">￥{{item.trade_rate_money}}</b>
          </div>
          <div class="num">{{item.trade_num}}</div>
        </div>
      </div>
    </template>
  </el-calendar>

2.script代码：

export default {
  data() {
    return {
      tradeDate: new Date(), //日期控件显示的月份
      tradeData: {
        schedule: [
          {
            trade_date:"2021-06-05",
            trade_money:"",
            trade_rate_money:"",
            trade_num:""
          }
        ]
      }, //每月数据交易数据
    };
  },
  watch: {
    currentDate(nVal) {
      this.tradeData.schedule = [];
      this.initList();  // 后台返回的数据
    }
  },
  computed: {
     //将返回数据里的时间与日历控件里的时间匹配，将数据回显在对应的位置上
    //数据的时间格式： trade_date:"2021-06-05" --- yyyy-MM-dd；
    //如果后端返回的时间不是yyyy-MM-dd，要转格式再匹配
    formatSchedule() {
      return data => {
        return this.tradeData.schedule.filter(ele => {
          let time = ele.trade_date;
          return time == data.day;
        });
      };
    }
  },
}

3.后台返回的数据结构：