vue后台管理，先点击查询才能点击导出，（消息提示）

业务功能：先点击查询才能点击导出，如果没点查询就点导出，则提示“请点击查询后，在执行导出”

//第一步 定义两个参数
data() {
return {
    search:false,
    export:false,
  }
}

//第二步 在导出逻辑前做判断

if((this.export && !this.search) || !this.search) {
    this.$message ({
        showCloe:true,
        message:'请点击查询后，在执行导出操作！'，
        type:'waring',
    

    });
  //this.export = false;
  //this.search = false;
    return
}


//第三步 在查询点击事件中把search改为true


onClick(formName) {
    if(valid) {
        this.search = true;
    }

}

补充：如果需要重置后在点击导出仍有提示change事件即可

<el-form ref="form" :model="form" label-width="80px" @change="formItemChange"> 
<el-radio-group v-model="ruleForm.resource" >
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
  </el-radio-group>
</el-form>

methods: {
    formItemChange(){
    this.export = true;
    this.search = false;

    }

}
//在重置里调用一下即可

this.formItemChange()

简单方法实现同等功能第二种方法：

//第一步 定义两个参数
data() {
    return {
        isQuery:false,
  }
}

//在导出前判断

if(!this.isQuery) {
    this.msgWarn('请点击查询后，在执行导出操作！')
    return
}


//再点击查询事件里判断为true
onClick(formName) {
    if(valid) {
        this.isQuery = true;
    }

}