nuxtjs项目中使用elementui中的Calendar组件扩展的一个价格日历

最近做一个旅游网站，有一块的需求就是要一个价格日历，不同日期显示不同的地点和价格，具体代码如下

<template>
  <div class="calendar-list-container">
    <!--价格日历渲染 -->
    <el-calendar>
      <template slot="dateCell" slot-scope="{date, data}">
        <div
          @click="getCellData(date,data)" 
          v-if="dealMyDate(data.day).busPlace" //判断当前日期是否有数据
          class="date-data-box"
          :class="{'has-select':selectedDate.indexOf( data.day )!=-1}" //选中的样式
        >
          <div class="date-box">
            <b>{
   {
    data.day.slice(-2) }}</b>
            <a v-for="(item,index) in chooseAfterValue" :key="index">
              <span
                v-if="item.value.indexOf( data.day )!=-1 && item.departCity && !item.arriveCity"
                :class="{'is-selected is-depart':item.value.indexOf( data.day )!=-1 && item.departCity && !item.arriveCity}"
              >{
   {
   item.value.indexOf( data.day )!=-1 && item.departCity && !item.arriveCity ? '上车':''}}</span>

              <span
                v-else-if="item.value.indexOf( data.day )!=-1 && !item.departCity && item.arriveCity"
                :class="{'is-selected is-arrive':item.value.indexOf( data.day )!=-1 && !item.departCity && item.arriveCity}"
              >{
   {
   item.value.indexOf( data.day )!=-1 && !item.departCity && item.arriveCity ? '下车':''}}</span>
            </a>
          </div>
          <p class="bplace">{
   {
   dealMyDate(data.day).busPlace}}</p>
          <p class="bprice">