vue 日期面板_vue+element展示时间面板，显示可选和禁用的时间

vue+element实现时间选择

最近有个需求，客户A在预约18号技师时，要根据18号技师的服务时间，自动展示哪些时间段可以预约，哪些时间段18号技师正在服务，而正在服务的时间段，客户A是不能预约的，页面效果如下：(灰色为禁选，白色为可选择，蓝色为选中)

在网上找了半天，也没有找到合适的日期插件，但又要实现这个效果，只能自己造一个了。

我的实现思路：

先将时间段(我的是从8点到夜里0点，每半个小时一个值)放入数组，页面使用button按钮，通过vue的v-for循环显示和赋值，根据条件对每个按钮设置颜色，是否禁用。

HTML部分

{{item.time}}

数据格式

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

}