预期功能
取号页面展示所有号源时间。vue前端进行判断,将后端返回的可约时间置为可点击状态,不可约时间置为不可点击状态(disabled)
实现方法
data()内建立全部时间数组:
nowTimeTemp:["09:15","09:20","09:25","09:30","09:35","09:40","09:45","09:50","09:55","10:00","10:10"],
后端返回的时间信息:
dayItems: [
{
day: "2022-04-01",
timeCount: "5",
timeList: "09:15|09:20|09:25|09:30|09:35|10:30|10:35|10:40|10:45",
},
{ day: "2022-04-02", timeCount: "1", timeList: "09:10" },
{ day: "2022-04-03", timeCount: "2", timeList: "10:10|10:30" },
],
将时间的竖线分割取出,将时间存进新数组中
chooseTime() {
var _this = this;
this.nowTimeItems = [];
for (let item of this.dayItems) {
// console.log(item)
if (item.day == _this.ruleForm.orderDay) {//根据选择的时间,判断是哪天的数据。这句需结合各位程序进行修改
_this.nowTimeItems = item.timeList.split("|");
break;
}
}
},
在el-radio
加入disabled
参数
用法 :disabled = true/false
true禁用,false不禁用
<el-radio
v-for="(item,index) in nowTimeTemp"//循环输出temp内的全部时间
:key="item"
:label="item"
border :value="item" name = "orderTime" :disabled="checkExist(item)?false:true"
>{{ item}}</el-radio
>
用三目运算符通过checkExist判断button是否可用
checkExist(item1){//通过v-for依次对Temp内的每个时间进行判断
//和后端传入的时间进行比较,有相同返回1 不同返回0
for(var i=0;i<this.nowTimeItems.length;i++){
if(item1 ==this.nowTimeItems[i]){
return 1;
break;
}
}
return 0;
},