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';
      }