美文网首页
el-switch 按钮根据时间校验是否禁用

el-switch 按钮根据时间校验是否禁用

作者: 流泪手心_521 | 来源:发表于2020-12-31 09:28 被阅读0次
     <el-table-column prop="online" label="上/下线" align="center">
                <template slot-scope="scope" v-if="scope.row.checkStatus==1">
                  <el-switch
                    :disabled="switchControl(scope.row)"//根据时间判断是否禁用,可以传方法,switchControl在方法里面写时间判断
                    v-model="scope.row.online"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="switchChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column>
    

    2.disabled里面写方法然后验证

     //判断是否超出时间不可上线
          switchControl(row){
            let getTimeStart=row.onlineTime.split(',')[0];
            let getTimeEnd=row.onlineTime.split(',')[1];
            let currentTime=dayjs().year()+ '-' +(dayjs().month()+1)+ '-' +dayjs().date()+' '+dayjs().hour()+':'+ dayjs().minute()+':'+dayjs().second();
            if(dayjs(currentTime).isBefore(dayjs(getTimeStart))&&dayjs(currentTime).isBefore(dayjs(getTimeEnd))){ //超出时间了
              return true; //disabled如果是true就是禁用
            }
          },
    

    3.上/下线:

    1. 审核通过后,若在上线时间段内,自动上线,且可手动进行上线/下线操作;
      在change方法里面写
    //上/下线
          switchChange(row) {
            let info = ''
            if(row.online==0){
              info = '是否确定要上线?'
            }else{
              info = '是否确定要下线?'
            }
            this.$confirm(info, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                let data={
                  id:row.id,
                  online: row.online ? 1 : 0
                };
                projectsEdit(data).then(res => {
                    if (res.status == 0) {
                      this.onSubmit();
                    } else {
                      this.onSubmit();
                      this.$message.warning(res.message);
                    }
                  })
                  .catch(error => {
                    this.onSubmit();
                  });
              })
              .catch(() => {
                this.onSubmit();
              });
          },
    

    相关文章

      网友评论

          本文标题:el-switch 按钮根据时间校验是否禁用

          本文链接:https://www.haomeiwen.com/subject/rzkloktx.html