美文网首页
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