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