vue实现预约取号选时间页面，判断element button是否可用，可用的时间为可点击，不可用的时间不可点击

预期功能

取号页面展示所有号源时间。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;
      },