vue+element展示時間面板，顯示可選和禁用的時間

vue+element實現時間選擇

最近有個需求，客戶A在預約18號技師時，要根據18號技師的服務時間，自動展示哪些時間段可以預約，哪些時間段18號技師正在服務，而正在服務的時間段，客戶A是不能預約的，頁面效果如下：(灰色爲禁選，白色爲可選擇，藍色爲選中)

在網上找了半天，也沒有找到合適的日期插件，但又要實現這個效果，只能自己造一個了。
我的實現思路：
先將時間段（我的是從8點到夜裏0點，每半個小時一個值）放入數組，頁面使用button按鈕，通過vue的v-for循環顯示和賦值，根據條件對每個按鈕設置顏色，是否禁用。

HTML部分

<div>
    <span v-for="(item,index) in timeList" :key="index">
       <span style="padding-left: 5px">
          <el-button size="medium" style="width: 80px" :type="item.type" :disabled="item.flag"
                     @click="selectTime(index,item.time)">{{item.time}}</el-button>
        </span>
           <!--每5個一行-->
        <span v-if="(index+1)%5==0">
          <br>
        </span>
    </span>
 </div>

數據格式

type:控制按鈕樣式（element按鈕樣式，info爲禁用狀態，primary爲選中狀態，" "爲可選狀態）
time：按鈕顯示的時間
flag：判斷按鈕是否禁用

timeList= [
          {'type': '', "time": "8:00", 'flag': false},
          {'type': '', "time": "8:30", 'flag': false},
          {'type': '', "time": "9:00", 'flag': false},
          {'type': 'primary', "time": "9:30", 'flag': false},
          {'type': 'info', "time": "10:00", 'flag': true},
        ]

按鈕選擇事件

 參數爲索引，和時間值
 selectTime(index, time) {
        //先查詢是否有已經選則的時間，有的話先取消原來的，再賦值新選中的
        let oldIndex;
        //沒有時返回-1
        oldIndex = this.timeList.findIndex((item) => {
          return item.type === 'primary';
        });
        //有已經選中的值,取消
        if (oldIndex > -1) {
          this.timeList[oldIndex].type = '';
        }
        //根據索引和時間對選擇的時間修改樣式
        let obj = {};
        obj = this.timeList.find((item) => {
          return item.time === time;
        });
        this.timeList[index].type = 'primary';
      }